<!doctype html>



  


<html class="theme-next pisces use-motion">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PBHRK7');</script>
<!-- End Google Tag Manager -->
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="前端 知识 面试," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.2" />






<meta name="description" content="本项目的面试题来源于 sudheerj/reactjs-interview-questions 这个项目。一时兴起就动起了翻译的念头，由于本人的 React 功力尚浅，翻译的内容难免有误或不妥的地方，望请各位见谅。如果你喜欢这个项目，请 Star，更感谢你的 Pull Request。  以下是现阶段本项目的短期计划：  完成前期的翻译工作 为 React 16 新特性，添加在线示例或完整的示例">
<meta name="keywords" content="前端 知识 面试">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试《第十三篇》 React">
<meta property="og:url" content="http://wurh.github.io/2019/03/31/201903311205/index.html">
<meta property="og:site_name" content="华Ing&#39;s blog">
<meta property="og:description" content="本项目的面试题来源于 sudheerj/reactjs-interview-questions 这个项目。一时兴起就动起了翻译的念头，由于本人的 React 功力尚浅，翻译的内容难免有误或不妥的地方，望请各位见谅。如果你喜欢这个项目，请 Star，更感谢你的 Pull Request。  以下是现阶段本项目的短期计划：  完成前期的翻译工作 为 React 16 新特性，添加在线示例或完整的示例">
<meta property="og:locale" content="en">
<meta property="og:image" content="http://wurh.github.io/2019/03/31/201903311205/images/state.jpg">
<meta property="og:image" content="http://wurh.github.io/2019/03/31/201903311205/images/vdom1.png">
<meta property="og:image" content="http://wurh.github.io/2019/03/31/201903311205/images/vdom2.png">
<meta property="og:image" content="http://wurh.github.io/2019/03/31/201903311205/images/vdom3.png">
<meta property="og:image" content="http://wurh.github.io/2019/03/31/201903311205/images/phases16.3.jpg">
<meta property="og:image" content="http://wurh.github.io/2019/03/31/201903311205/images/phases.png">
<meta property="og:image" content="http://wurh.github.io/2019/03/31/201903311205/images/flux.png">
<meta property="og:image" content="http://wurh.github.io/2019/03/31/201903311205/images/error_boundary.png">
<meta property="og:updated_time" content="2019-07-12T06:10:38.189Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试《第十三篇》 React">
<meta name="twitter:description" content="本项目的面试题来源于 sudheerj/reactjs-interview-questions 这个项目。一时兴起就动起了翻译的念头，由于本人的 React 功力尚浅，翻译的内容难免有误或不妥的地方，望请各位见谅。如果你喜欢这个项目，请 Star，更感谢你的 Pull Request。  以下是现阶段本项目的短期计划：  完成前期的翻译工作 为 React 16 新特性，添加在线示例或完整的示例">
<meta name="twitter:image" content="http://wurh.github.io/2019/03/31/201903311205/images/state.jpg">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: 'Author'
    }
  };
</script>




  <link rel="canonical" href="http://wurh.github.io/2019/03/31/201903311205/"/>


  <title> 前端面试《第十三篇》 React | 华Ing's blog </title>
</head>

<body itemscope itemtype="//schema.org/WebPage" lang="en">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBHRK7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

  










  
  
    
  

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-69412379-1', 'auto');
  ga('send', 'pageview');

</script>

  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b3ddfb8655d8b77429e04c7a4d5bcbc1";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
  </script>


  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="//schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">华Ing's blog</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">harder and harder</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            Categories
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            Archives
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            Tags
          </a>
        </li>
      

      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="//schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                前端面试《第十三篇》 React
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2019-03-31T14:31:12+08:00" content="2019-03-31">
              2019-03-31
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/前端面试/" itemprop="url" rel="index">
                    <span itemprop="name">前端面试</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/2019/03/31/201903311205/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="2019/03/31/201903311205/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <blockquote>
<p>本项目的面试题来源于 <a href="https://github.com/sudheerj/reactjs-interview-questions" target="_blank" rel="noopener">sudheerj/reactjs-interview-questions</a> 这个项目。一时兴起就动起了翻译的念头，由于本人的 React 功力尚浅，翻译的内容难免有误或不妥的地方，望请各位见谅。如果你喜欢这个项目，请 Star，更感谢你的 Pull Request。</p>
</blockquote>
<p>以下是现阶段本项目的短期计划：</p>
<ol>
<li>完成前期的翻译工作</li>
<li>为 React 16 新特性，添加在线示例或完整的示例代码</li>
</ol>
<p>这里再次感谢 <strong><a href="https://github.com/liaoyongfu" target="_blank" rel="noopener">liaoyongfu</a></strong> 的大力支持🌹！</p>
<h3 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h3><!-- TOC -->
<table>
<thead>
<tr>
<th>序号.</th>
<th>问题</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><a href="#core-react">Core React</a></td>
</tr>
<tr>
<td>1</td>
<td><a href="#什么是-react">什么是 React?</a></td>
</tr>
<tr>
<td>2</td>
<td><a href="#react-的主要特点是什么">React 的主要特点是什么?</a></td>
</tr>
<tr>
<td>3</td>
<td><a href="#什么是-jsx">什么是 JSX?</a></td>
</tr>
<tr>
<td>4</td>
<td><a href="#元素和组件有什么区别">元素和组件有什么区别?</a></td>
</tr>
<tr>
<td>5</td>
<td><a href="#如何在-react-中创建组件">如何在 React 中创建组件?</a></td>
</tr>
<tr>
<td>6</td>
<td><a href="#何时使用类组件和函数组件">何时使用类组件和函数组件?</a></td>
</tr>
<tr>
<td>7</td>
<td><a href="#什么是-pure-components">什么是 Pure Components?</a></td>
</tr>
<tr>
<td>8</td>
<td><a href="#react-的状态是什么">React 的状态是什么?</a></td>
</tr>
<tr>
<td>9</td>
<td><a href="#react-中的-props-是什么">React 中的 props 是什么?</a></td>
</tr>
<tr>
<td>10</td>
<td><a href="#状态和属性有什么区别">状态和属性有什么区别?</a></td>
</tr>
<tr>
<td>11</td>
<td><a href="#我们为什么不能直接更新状态">我们为什么不能直接更新状态?</a></td>
</tr>
<tr>
<td>12</td>
<td><a href="#回调函数作为-setstate-参数的目的是什么">回调函数作为 <code>setState()</code> 参数的目的是什么?</a></td>
</tr>
<tr>
<td>13</td>
<td><a href="#html-和-react-事件处理有什么区别">HTML 和 React 事件处理有什么区别?</a></td>
</tr>
<tr>
<td>14</td>
<td><a href="#如何在-jsx-回调中绑定方法或事件处理程序">如何在 JSX 回调中绑定方法或事件处理程序?</a></td>
</tr>
<tr>
<td>15</td>
<td><a href="#如何将参数传递给事件处理程序或回调函数">如何将参数传递给事件处理程序或回调函数?</a></td>
</tr>
<tr>
<td>16</td>
<td><a href="#react-中的合成事件是什么">React 中的合成事件是什么?</a></td>
</tr>
<tr>
<td>17</td>
<td><a href="#什么是内联条件表达式">什么是内联条件表达式?</a></td>
</tr>
<tr>
<td>18</td>
<td><a href="#什么是-&quot;key&quot;-属性在元素数组中使用它们有什么好处">什么是 “key” 属性，在元素数组中使用它们有什么好处?</a></td>
</tr>
<tr>
<td>19</td>
<td><a href="#refs-有什么用">refs 有什么用?</a></td>
</tr>
<tr>
<td>20</td>
<td><a href="#如何创建-refs">如何创建 refs?</a></td>
</tr>
<tr>
<td>21</td>
<td><a href="#什么是-forward-refs">什么是 forward refs?</a></td>
</tr>
<tr>
<td>22</td>
<td><a href="#callback-refs-和-finddomnode-哪一个是首选选项">callback refs 和 findDOMNode() 哪一个是首选选项?</a></td>
</tr>
<tr>
<td>23</td>
<td><a href="#为什么-string-refs-被弃用">为什么 String Refs 被弃用?</a></td>
</tr>
<tr>
<td>24</td>
<td><a href="#什么是-virtual-dom">什么是 Virtual DOM?</a></td>
</tr>
<tr>
<td>25</td>
<td><a href="#virtual-dom-如何工作">Virtual DOM 如何工作?</a></td>
</tr>
<tr>
<td>26</td>
<td><a href="#shadow-dom-和-virtual-dom-之间有什么区别">Shadow DOM 和 Virtual DOM 之间有什么区别?</a></td>
</tr>
<tr>
<td>27</td>
<td><a href="#什么是-react-fiber">什么是 React Fiber?</a></td>
</tr>
<tr>
<td>28</td>
<td><a href="#react-fiber-的主要目标是什么">React Fiber 的主要目标是什么?</a></td>
</tr>
<tr>
<td>29</td>
<td><a href="#什么是受控组件">什么是受控组件?</a></td>
</tr>
<tr>
<td>30</td>
<td><a href="#什么是非受控组件">什么是非受控组件?</a></td>
</tr>
<tr>
<td>31</td>
<td><a href="#createelement-和-cloneelement-有什么区别">createElement 和 cloneElement 有什么区别?</a></td>
</tr>
<tr>
<td>32</td>
<td><a href="#在-react-中的提升状态是什么">在 React 中的提升状态是什么?</a></td>
</tr>
<tr>
<td>33</td>
<td><a href="#组件生命周期的不同阶段是什么">组件生命周期的不同阶段是什么?</a></td>
</tr>
<tr>
<td>34</td>
<td><a href="#react-生命周期方法有哪些">React 生命周期方法有哪些?</a></td>
</tr>
<tr>
<td>35</td>
<td><a href="#什么是高阶组件hoc">什么是高阶组件（HOC）?</a></td>
</tr>
<tr>
<td>36</td>
<td><a href="#如何为高阶组件创建属性代理">如何为高阶组件创建属性代理?</a></td>
</tr>
<tr>
<td>37</td>
<td><a href="#什么是上下文context">什么是上下文（Context）?</a></td>
</tr>
<tr>
<td>38</td>
<td><a href="#children-属性是什么">children 属性是什么?</a></td>
</tr>
<tr>
<td>39</td>
<td><a href="#怎样在-react-中写注释">怎样在 React 中写注释?</a></td>
</tr>
<tr>
<td>40</td>
<td><a href="#构造函数使用带-props-参数的目的是什么">构造函数使用带 props 参数的目的是什么?</a></td>
</tr>
<tr>
<td>41</td>
<td><a href="#什么是调解">什么是调解?</a></td>
</tr>
<tr>
<td>42</td>
<td><a href="#如何使用动态属性名设置-state-">如何使用动态属性名设置 state ?</a></td>
</tr>
<tr>
<td>43</td>
<td><a href="#每次组件渲染时调用函数的常见错误是什么">每次组件渲染时调用函数的常见错误是什么?</a></td>
</tr>
<tr>
<td>44</td>
<td><a href="#为什么有组件名称要首字母大写">为什么有组件名称要首字母大写?</a></td>
</tr>
<tr>
<td>45</td>
<td><a href="#为什么-react-使用-classname-而不是-class-属性">为什么 React 使用 <code>className</code> 而不是 <code>class</code> 属性?</a></td>
</tr>
<tr>
<td>46</td>
<td><a href="#什么是-fragments-">什么是 Fragments ?</a></td>
</tr>
<tr>
<td>47</td>
<td><a href="#为什么使用-fragments-比使用容器-div-更好">为什么使用 Fragments 比使用容器 div 更好?</a></td>
</tr>
<tr>
<td>48</td>
<td><a href="#在-react-中什么是-portal-">在 React 中什么是 Portal ?</a></td>
</tr>
<tr>
<td>49</td>
<td><a href="#什么是无状态组件">什么是无状态组件?</a></td>
</tr>
<tr>
<td>50</td>
<td><a href="#什么是有状态组件">什么是有状态组件?</a></td>
</tr>
<tr>
<td>51</td>
<td><a href="#在-react-中如何校验-props-属性">在 React 中如何校验 props 属性?</a></td>
</tr>
<tr>
<td>52</td>
<td><a href="#react-的优点是什么">React 的优点是什么?</a></td>
</tr>
<tr>
<td>53</td>
<td><a href="#react-的局限性是什么">React 的局限性是什么?</a></td>
</tr>
<tr>
<td>54</td>
<td><a href="#在-react-v16-中的错误边界是什么">在 React v16 中的错误边界是什么?</a></td>
</tr>
<tr>
<td>55</td>
<td><a href="#在-react-v15-中如何处理错误边界">在 React v15 中如何处理错误边界?</a></td>
</tr>
<tr>
<td>56</td>
<td><a href="#静态类型检查推荐的方法是什么">静态类型检查推荐的方法是什么?</a></td>
</tr>
<tr>
<td>57</td>
<td><a href="#react-dom-包的用途是什么"><code>react-dom</code> 包的用途是什么?</a></td>
</tr>
<tr>
<td>58</td>
<td><a href="#react-dom-中-render-方法的目的是什么"><code>react-dom</code> 中 render 方法的目的是什么?</a></td>
</tr>
<tr>
<td>59</td>
<td><a href="#reactdomserver-是什么">ReactDOMServer 是什么?</a></td>
</tr>
<tr>
<td>60</td>
<td><a href="#在-react-中如何使用-innerhtml">在 React 中如何使用 innerHTML?</a></td>
</tr>
<tr>
<td>61</td>
<td><a href="#如何在-react-中使用样式">如何在 React 中使用样式?</a></td>
</tr>
<tr>
<td>62</td>
<td><a href="#在-react-中事件有何不同">在 React 中事件有何不同?</a></td>
</tr>
<tr>
<td>63</td>
<td><a href="#如果在构造函数中使用-setstate-会发生什么">如果在构造函数中使用 <code>setState()</code> 会发生什么?</a></td>
</tr>
<tr>
<td>64</td>
<td><a href="#索引作为键的影响是什么">索引作为键的影响是什么?</a></td>
</tr>
<tr>
<td>65</td>
<td><a href="#在-componentwillmount-方法中使用-setstate-好吗">在 <code>componentWillMount()</code> 方法中使用 <code>setState()</code> 好吗?</a></td>
</tr>
<tr>
<td>66</td>
<td><a href="#如果在初始状态中使用-props-属性会发生什么">如果在初始状态中使用 props 属性会发生什么?</a></td>
</tr>
<tr>
<td>67</td>
<td><a href="#如何有条件地渲染组件">如何有条件地渲染组件?</a></td>
</tr>
<tr>
<td>68</td>
<td><a href="#为什么在-dom-元素上展开-props-需要小心">为什么在 DOM 元素上展开 props 需要小心?</a></td>
</tr>
<tr>
<td>69</td>
<td><a href="#在-react-中如何使用装饰器">在 React 中如何使用装饰器?</a></td>
</tr>
<tr>
<td>70</td>
<td><a href="#如何-memoize记忆组件">如何 memoize（记忆）组件?</a></td>
</tr>
<tr>
<td>71</td>
<td><a href="#如何实现-server-side-rendering-或-ssr">如何实现 Server Side Rendering 或 SSR?</a></td>
</tr>
<tr>
<td>72</td>
<td><a href="#如何在-react-中启用生产模式">如何在 React 中启用生产模式?</a></td>
</tr>
<tr>
<td>73</td>
<td><a href="#什么是-cra-及其好处">什么是 CRA 及其好处?</a></td>
</tr>
<tr>
<td>74</td>
<td><a href="#在-mounting-阶段生命周期方法的执行顺序是什么">在 mounting 阶段生命周期方法的执行顺序是什么?</a></td>
</tr>
<tr>
<td>75</td>
<td><a href="#在-react-v16-中哪些生命周期方法将被弃用">在 React v16 中，哪些生命周期方法将被弃用?</a></td>
</tr>
<tr>
<td>76</td>
<td><a href="#生命周期方法-getderivedstatefromprops-的目的是什么">生命周期方法 <code>getDerivedStateFromProps()</code> 的目的是什么?</a></td>
</tr>
<tr>
<td>77</td>
<td><a href="#生命周期方法-getsnapshotbeforeupdate-的目的是什么">生命周期方法 <code>getSnapshotBeforeUpdate()</code> 的目的是什么?</a></td>
</tr>
<tr>
<td>78</td>
<td><a href="#createelement-和-cloneelement-方法有什么区别">createElement() 和 cloneElement() 方法有什么区别?</a></td>
</tr>
<tr>
<td>79</td>
<td><a href="#推荐的组件命名方法是什么">推荐的组件命名方法是什么?</a></td>
</tr>
<tr>
<td>80</td>
<td><a href="#在组件类中方法的推荐顺序是什么">在组件类中方法的推荐顺序是什么?</a></td>
</tr>
<tr>
<td>81</td>
<td><a href="#什么是-switching-组件">什么是 switching 组件?</a></td>
</tr>
<tr>
<td>82</td>
<td><a href="#为什么我们需要将函数传递给-setstate-方法">为什么我们需要将函数传递给 setState() 方法?</a></td>
</tr>
<tr>
<td>83</td>
<td><a href="#在-react-中什么是严格模式">在 React 中什么是严格模式?</a></td>
</tr>
<tr>
<td>84</td>
<td><a href="#react-mixins-是什么">React Mixins 是什么?</a></td>
</tr>
<tr>
<td>85</td>
<td><a href="#为什么-ismounted-是一个反模式而正确的解决方案是什么">为什么 <code>isMounted()</code> 是一个反模式，而正确的解决方案是什么?</a></td>
</tr>
<tr>
<td>86</td>
<td><a href="#react-中支持哪些指针事件">React 中支持哪些指针事件?</a></td>
</tr>
<tr>
<td>87</td>
<td><a href="#为什么组件名称应该以大写字母开头">为什么组件名称应该以大写字母开头?</a></td>
</tr>
<tr>
<td>88</td>
<td><a href="#在-react-v16-中是否支持自定义-dom-属性">在 React v16 中是否支持自定义 DOM 属性?</a></td>
</tr>
<tr>
<td>89</td>
<td><a href="#constructor-和-getinitialstate-有什么区别">constructor 和 getInitialState 有什么区别?</a></td>
</tr>
<tr>
<td>90</td>
<td><a href="#是否可以在不调用-setstate-方法的情况下强制组件重新渲染">是否可以在不调用 setState 方法的情况下，强制组件重新渲染?</a></td>
</tr>
<tr>
<td>91</td>
<td><a href="#在使用-es6-类的-react-中-super-和-superprops-有什么区别">在使用 ES6 类的 React 中 <code>super()</code> 和 <code>super(props)</code> 有什么区别?</a></td>
</tr>
<tr>
<td>92</td>
<td><a href="#在-jsx-中如何进行循环">在 JSX 中如何进行循环?</a></td>
</tr>
<tr>
<td>93</td>
<td><a href="#如何在-attribute-引号中访问-props-属性">如何在 attribute 引号中访问 props 属性?</a></td>
</tr>
<tr>
<td>94</td>
<td><a href="#什么是-react-proptype-数组">什么是 React proptype 数组?</a></td>
</tr>
<tr>
<td>95</td>
<td><a href="#如何有条件地应用样式类">如何有条件地应用样式类?</a></td>
</tr>
<tr>
<td>96</td>
<td><a href="#react-和-reactdom-之间有什么区别">React 和 ReactDOM 之间有什么区别?</a></td>
</tr>
<tr>
<td>97</td>
<td><a href="#为什么-reactdom-从-react-分离出来">为什么 ReactDOM 从 React 分离出来?</a></td>
</tr>
<tr>
<td>98</td>
<td><a href="#如何使用-react-label-元素">如何使用 React label 元素?</a></td>
</tr>
<tr>
<td>99</td>
<td><a href="#如何合并多个内联的样式对象">如何合并多个内联的样式对象?</a></td>
</tr>
<tr>
<td>100</td>
<td><a href="#如何在调整浏览器大小时重新渲染视图">如何在调整浏览器大小时重新渲染视图?</a></td>
</tr>
<tr>
<td>101</td>
<td><a href="#setstate-和-replacestate-方法之间有什么区别"><code>setState()</code> 和 <code>replaceState()</code> 方法之间有什么区别?</a></td>
</tr>
<tr>
<td>102</td>
<td><a href="#如何监听状态变化">如何监听状态变化?</a></td>
</tr>
<tr>
<td>103</td>
<td><a href="#在-react-状态中删除数组元素的推荐方法是什么">在 React 状态中删除数组元素的推荐方法是什么?</a></td>
</tr>
<tr>
<td>104</td>
<td><a href="#在-react-中是否可以不在页面上渲染-html-内容">在 React 中是否可以不在页面上渲染 HTML 内容?</a></td>
</tr>
<tr>
<td>105</td>
<td><a href="#如何用-react-漂亮地显示-json">如何用 React 漂亮地显示 JSON?</a></td>
</tr>
<tr>
<td>106</td>
<td><a href="#为什么你不能更新-react-中的-props">为什么你不能更新 React 中的 props?</a></td>
</tr>
<tr>
<td>107</td>
<td><a href="#如何在页面加载时聚焦一个输入元素">如何在页面加载时聚焦一个输入元素?</a></td>
</tr>
<tr>
<td>108</td>
<td><a href="#更新状态中的对象有哪些可能的方法">更新状态中的对象有哪些可能的方法?</a></td>
</tr>
<tr>
<td>109</td>
<td><a href="#为什么函数比对象更适合于-setstate">为什么函数比对象更适合于 <code>setState()</code>?</a></td>
</tr>
<tr>
<td>110</td>
<td><a href="#我们如何在浏览器中找到当前正在运行的-react-版本">我们如何在浏览器中找到当前正在运行的 React 版本?</a></td>
</tr>
<tr>
<td>111</td>
<td><a href="#在-create-react-app-项目中导入-polyfills-的方法有哪些">在 <code>create-react-app</code> 项目中导入 polyfills 的方法有哪些?</a></td>
</tr>
<tr>
<td>112</td>
<td><a href="#如何在-create-react-app-中使用-https-而不是-http">如何在 create-react-app 中使用 https 而不是 http?</a></td>
</tr>
<tr>
<td>113</td>
<td><a href="#如何避免在-create-react-app-中使用相对路径导入">如何避免在 create-react-app 中使用相对路径导入?</a></td>
</tr>
<tr>
<td>114</td>
<td><a href="#如何为-react-router-添加-google-analytics">如何为 React Router 添加 Google Analytics?</a></td>
</tr>
<tr>
<td>115</td>
<td><a href="#如何每秒更新一个组件">如何每秒更新一个组件?</a></td>
</tr>
<tr>
<td>116</td>
<td><a href="#如何将-vendor-prefixes-应用于-react-中的内联样式">如何将 vendor prefixes 应用于 React 中的内联样式?</a></td>
</tr>
<tr>
<td>117</td>
<td><a href="#如何使用-react-和-es6-导入和导出组件">如何使用 React 和 ES6 导入和导出组件?</a></td>
</tr>
<tr>
<td>118</td>
<td><a href="#为什么-react-组件名称必须以大写字母开头">为什么 React 组件名称必须以大写字母开头?</a></td>
</tr>
<tr>
<td>119</td>
<td><a href="#为什么组件的构造函数只被调用一次">为什么组件的构造函数只被调用一次?</a></td>
</tr>
<tr>
<td>120</td>
<td><a href="#在-react-中如何定义常量">在 React 中如何定义常量?</a></td>
</tr>
<tr>
<td>121</td>
<td><a href="#在-react-中如何以编程方式触发点击事件">在 React 中如何以编程方式触发点击事件?</a></td>
</tr>
<tr>
<td>122</td>
<td><a href="#在-react-中是否可以使用-async/await">在 React 中是否可以使用 async/await?</a></td>
</tr>
<tr>
<td>123</td>
<td><a href="#react-项目常见的文件结构是什么">React 项目常见的文件结构是什么?</a></td>
</tr>
<tr>
<td>124</td>
<td><a href="#最流行的动画软件包是什么">最流行的动画软件包是什么?</a></td>
</tr>
<tr>
<td>125</td>
<td><a href="#模块化样式文件有什么好处">模块化样式文件有什么好处?</a></td>
</tr>
<tr>
<td>126</td>
<td><a href="#什么是-react-流行的特定-linters">什么是 React 流行的特定 linters?</a></td>
</tr>
<tr>
<td>127</td>
<td><a href="#如何发起-ajax-调用以及应该在哪些组件生命周期方法中进行-ajax-调用">如何发起 AJAX 调用以及应该在哪些组件生命周期方法中进行 AJAX 调用?</a></td>
</tr>
<tr>
<td>128</td>
<td><a href="#什么是渲染属性">什么是渲染属性?</a></td>
</tr>
<tr>
<td></td>
<td><a href="#react-router">React Router</a></td>
</tr>
<tr>
<td>129</td>
<td><a href="#什么是-react-router">什么是 React Router?</a></td>
</tr>
<tr>
<td>130</td>
<td><a href="#react-router-与-history-库的区别">React Router 与 history 库的区别?</a></td>
</tr>
<tr>
<td>131</td>
<td><a href="#在-react-router-v4-中的router组件是什么">在 React Router v4 中的<code>&lt;Router&gt;</code>组件是什么?</a></td>
</tr>
<tr>
<td>132</td>
<td><a href="#history-中的-push-和-replace-方法的目的是什么"><code>history</code> 中的 <code>push()</code> 和 <code>replace()</code> 方法的目的是什么?</a></td>
</tr>
<tr>
<td>133</td>
<td><a href="#如何使用在-react-router-v4-中以编程的方式进行导航">如何使用在 React Router v4 中以编程的方式进行导航?</a></td>
</tr>
<tr>
<td>134</td>
<td><a href="#如何在-react-router-v4-中获取查询字符串参数">如何在 React Router v4 中获取查询字符串参数?</a></td>
</tr>
<tr>
<td>135</td>
<td><a href="#为什么你会得到-&quot;router-may-have-only-one-child-element&quot;-警告">为什么你会得到 “Router may have only one child element” 警告?</a></td>
</tr>
<tr>
<td>136</td>
<td><a href="#如何在-react-router-v4-中将-params-传递给-history.push-方法">如何在 React Router v4 中将 params 传递给 <code>history.push</code> 方法?</a></td>
</tr>
<tr>
<td>137</td>
<td><a href="#如何实现默认页面或-404-页面">如何实现默认页面或 404 页面?</a></td>
</tr>
<tr>
<td>138</td>
<td><a href="#如何在-react-router-v4-上获取历史对象">如何在 React Router v4 上获取历史对象?</a></td>
</tr>
<tr>
<td>139</td>
<td><a href="#登录后如何执行自动重定向">登录后如何执行自动重定向?</a></td>
</tr>
<tr>
<td></td>
<td><a href="#react-internationalization">React Internationalization</a></td>
</tr>
<tr>
<td>140</td>
<td><a href="#什么是-react-intl">什么是 React Intl?</a></td>
</tr>
<tr>
<td>141</td>
<td><a href="#react-intl-的主要特性是什么">React Intl 的主要特性是什么?</a></td>
</tr>
<tr>
<td>142</td>
<td><a href="#在-react-intl-中有哪两种格式化方式">在 React Intl 中有哪两种格式化方式?</a></td>
</tr>
<tr>
<td>143</td>
<td><a href="#在-react-intl-中如何使用formattedmessage作为占位符使用">在 React Intl 中如何使用<code>&lt;FormattedMessage&gt;</code>作为占位符使用?</a></td>
</tr>
<tr>
<td>144</td>
<td><a href="#如何使用-react-intl-访问当前语言环境">如何使用 React Intl 访问当前语言环境?</a></td>
</tr>
<tr>
<td>145</td>
<td><a href="#如何使用-react-intl-格式化日期">如何使用 React Intl 格式化日期?</a></td>
</tr>
<tr>
<td></td>
<td><a href="#react-testing">React Testing</a></td>
</tr>
<tr>
<td>146</td>
<td><a href="#在-react-测试中什么是浅层渲染shallow-renderer">在 React 测试中什么是浅层渲染（Shallow Renderer）?</a></td>
</tr>
<tr>
<td>147</td>
<td><a href="#在-react-中-testrenderer-包是什么">在 React 中 <code>TestRenderer</code> 包是什么?</a></td>
</tr>
<tr>
<td>148</td>
<td><a href="#reacttestutils-包的目的是什么">ReactTestUtils 包的目的是什么?</a></td>
</tr>
<tr>
<td>149</td>
<td><a href="#什么是-jest">什么是 Jest?</a></td>
</tr>
<tr>
<td>150</td>
<td><a href="#jest-对比-jasmine-有什么优势">Jest 对比 Jasmine 有什么优势?</a></td>
</tr>
<tr>
<td>151</td>
<td><a href="#举一个简单的-jest-测试用例">举一个简单的 Jest 测试用例</a></td>
</tr>
<tr>
<td></td>
<td><a href="#react-redux">React Redux</a></td>
</tr>
<tr>
<td>152</td>
<td><a href="#什么是-flux">什么是 Flux?</a></td>
</tr>
<tr>
<td>153</td>
<td><a href="#什么是-redux">什么是 Redux?</a></td>
</tr>
<tr>
<td>154</td>
<td><a href="#redux-的核心原则是什么">Redux 的核心原则是什么？?</a></td>
</tr>
<tr>
<td>155</td>
<td><a href="#与-flux-相比redux-的缺点是什么">与 Flux 相比，Redux 的缺点是什么?</a></td>
</tr>
<tr>
<td>156</td>
<td><a href="#mapstatetoprops-和-mapdispatchtoprops-之间有什么区别"><code>mapStateToProps()</code> 和 <code>mapDispatchToProps()</code> 之间有什么区别?</a></td>
</tr>
<tr>
<td>157</td>
<td><a href="#我可以在-reducer-中触发一个-action-吗">我可以在 reducer 中触发一个 Action 吗?</a></td>
</tr>
<tr>
<td>158</td>
<td><a href="#如何在组件外部访问-redux-存储的对象">如何在组件外部访问 Redux 存储的对象?</a></td>
</tr>
<tr>
<td>159</td>
<td><a href="#mvw-模式的缺点是什么">MVW 模式的缺点是什么?</a></td>
</tr>
<tr>
<td>160</td>
<td><a href="#redux-和-rxjs-之间是否有任何相似之处">Redux 和 RxJS 之间是否有任何相似之处?</a></td>
</tr>
<tr>
<td>161</td>
<td><a href="#如何在加载时触发-action">如何在加载时触发 Action?</a></td>
</tr>
<tr>
<td>162</td>
<td><a href="#在-react-中如何使用-redux-的-connect-">在 React 中如何使用 Redux 的 <code>connect()</code> ?</a></td>
</tr>
<tr>
<td>163</td>
<td><a href="#如何在-redux-中重置状态">如何在 Redux 中重置状态?</a></td>
</tr>
<tr>
<td>164</td>
<td><a href="#redux-中连接装饰器的-at-符号的目的是什么">Redux 中连接装饰器的 <code>at</code> 符号的目的是什么?</a></td>
</tr>
<tr>
<td>165</td>
<td><a href="#react-上下文和-react-redux-之间有什么区别">React 上下文和 React Redux 之间有什么区别?</a></td>
</tr>
<tr>
<td>166</td>
<td><a href="#为什么-redux-状态函数称为-reducers-">为什么 Redux 状态函数称为 reducers ?</a></td>
</tr>
<tr>
<td>167</td>
<td><a href="#如何在-redux-中发起-ajax-请求">如何在 Redux 中发起 AJAX 请求?</a></td>
</tr>
<tr>
<td>168</td>
<td><a href="#我应该在-redux-store-中保留所有组件的状态吗">我应该在 Redux Store 中保留所有组件的状态吗?</a></td>
</tr>
<tr>
<td>169</td>
<td><a href="#访问-redux-store-的正确方法是什么">访问 Redux Store 的正确方法是什么?</a></td>
</tr>
<tr>
<td>170</td>
<td><a href="#react-redux-中展示组件和容器组件之间的区别是什么">React Redux 中展示组件和容器组件之间的区别是什么?</a></td>
</tr>
<tr>
<td>171</td>
<td><a href="#redux-中常量的用途是什么">Redux 中常量的用途是什么?</a></td>
</tr>
<tr>
<td>172</td>
<td><a href="#编写-mapdispatchtoprops-有哪些不同的方法">编写 <code>mapDispatchToProps()</code> 有哪些不同的方法?</a></td>
</tr>
<tr>
<td>173</td>
<td><a href="#在-mapstatetoprops-和-mapdispatchtoprops-中使用-ownprops-参数有什么用">在 <code>mapStateToProps()</code> 和 <code>mapDispatchToProps()</code> 中使用 <code>ownProps</code> 参数有什么用?</a></td>
</tr>
<tr>
<td>174</td>
<td><a href="#如何构建-redux-项目目录">如何构建 Redux 项目目录?</a></td>
</tr>
<tr>
<td>175</td>
<td><a href="#什么是-redux-saga">什么是 redux-saga?</a></td>
</tr>
<tr>
<td>176</td>
<td><a href="#redux-saga-的模型概念是什么">redux-saga 的模型概念是什么?</a></td>
</tr>
<tr>
<td>177</td>
<td><a href="#在-redux-saga-中-call-和-put-之间有什么区别">在 redux-saga 中 <code>call()</code> 和 <code>put()</code> 之间有什么区别?</a></td>
</tr>
<tr>
<td>178</td>
<td><a href="#什么是-redux-thunk">什么是 Redux Thunk?</a></td>
</tr>
<tr>
<td>179</td>
<td><a href="#redux-saga-和-redux-thunk-之间有什么区别"><code>redux-saga</code> 和 <code>redux-thunk</code> 之间有什么区别?</a></td>
</tr>
<tr>
<td>180</td>
<td><a href="#什么是-redux-devtools">什么是 Redux DevTools?</a></td>
</tr>
<tr>
<td>181</td>
<td><a href="#redux-devtools-的功能有哪些">Redux DevTools 的功能有哪些?</a></td>
</tr>
<tr>
<td>182</td>
<td><a href="#什么是-redux-选择器以及使用它们的原因">什么是 Redux 选择器以及使用它们的原因?</a></td>
</tr>
<tr>
<td>183</td>
<td><a href="#什么是-redux-form">什么是 Redux Form?</a></td>
</tr>
<tr>
<td>184</td>
<td><a href="#redux-form-的主要功能有哪些">Redux Form 的主要功能有哪些?</a></td>
</tr>
<tr>
<td>185</td>
<td><a href="#如何向-redux-添加多个中间件">如何向 Redux 添加多个中间件?</a></td>
</tr>
<tr>
<td>186</td>
<td><a href="#如何在-redux-中设置初始状态">如何在 Redux 中设置初始状态?</a></td>
</tr>
<tr>
<td>187</td>
<td><a href="#relay-与-redux-有何不同">Relay 与 Redux 有何不同?</a></td>
</tr>
<tr>
<td></td>
<td><a href="#react-native">React Native</a></td>
</tr>
<tr>
<td>188</td>
<td><a href="#react-native-和-react-有什么区别">React Native 和 React 有什么区别?</a></td>
</tr>
<tr>
<td>189</td>
<td><a href="#如何测试-react-native-应用程序">如何测试 React Native 应用程序?</a></td>
</tr>
<tr>
<td>190</td>
<td><a href="#如何在-react-native-查看日志">如何在 React Native 查看日志?</a></td>
</tr>
<tr>
<td>191</td>
<td><a href="#怎么调试-react-native-应用">怎么调试 React Native 应用?</a></td>
</tr>
<tr>
<td></td>
<td><a href="#react-supported-libraries-&amp;-integration">React supported libraries &amp; Integration</a></td>
</tr>
<tr>
<td>192</td>
<td><a href="#什么是-reselect-以及它是如何工作的">什么是 Reselect 以及它是如何工作的?</a></td>
</tr>
<tr>
<td>193</td>
<td><a href="#什么是-flow">什么是 Flow?</a></td>
</tr>
<tr>
<td>194</td>
<td><a href="#flow-和-proptypes-有什么区别">Flow 和 PropTypes 有什么区别?</a></td>
</tr>
<tr>
<td>195</td>
<td><a href="#在-react-中如何使用-font-awesome-图标">在 React 中如何使用 Font Awesome 图标?</a></td>
</tr>
<tr>
<td>196</td>
<td><a href="#什么-是-react-开发者工具">什么 是 React 开发者工具?</a></td>
</tr>
<tr>
<td>197</td>
<td><a href="#在-chrome-中为什么-devtools-没有加载本地文件">在 Chrome 中为什么 DevTools 没有加载本地文件?</a></td>
</tr>
<tr>
<td>198</td>
<td><a href="#如何在-react-中使用-polymer">如何在 React 中使用 Polymer?</a></td>
</tr>
<tr>
<td>199</td>
<td><a href="#与-vue.js-相比react-有哪些优势">与 Vue.js 相比，React 有哪些优势?</a></td>
</tr>
<tr>
<td>200</td>
<td><a href="#react-和-angular-有什么区别">React 和 Angular 有什么区别?</a></td>
</tr>
<tr>
<td>201</td>
<td><a href="#为什么-react-选项卡不会显示在-devtools-中">为什么 React 选项卡不会显示在 DevTools 中?</a></td>
</tr>
<tr>
<td>202</td>
<td><a href="#什么是-styled-components">什么是 Styled Components?</a></td>
</tr>
<tr>
<td>203</td>
<td><a href="#举一个-styled-components-的例子">举一个 Styled Components 的例子?</a></td>
</tr>
<tr>
<td>204</td>
<td><a href="#什么是-relay">什么是 Relay?</a></td>
</tr>
<tr>
<td>205</td>
<td><a href="#如何在-create-react-app-中使用-typescript">如何在 <code>create-react-app</code> 中使用 TypeScript?</a></td>
</tr>
<tr>
<td></td>
<td><a href="#miscellaneous">Miscellaneous</a></td>
</tr>
<tr>
<td>206</td>
<td><a href="#reselect-库的主要功能有哪些">Reselect 库的主要功能有哪些?</a></td>
</tr>
<tr>
<td>207</td>
<td><a href="#举一个-reselect-用法的例子">举一个 Reselect 用法的例子?</a></td>
</tr>
<tr>
<td>208</td>
<td><a href="#redux-中的-action-是什么">Redux 中的 Action 是什么?</a></td>
</tr>
<tr>
<td>209</td>
<td><a href="#在-react-中-statics-对象是否能与-es6-类一起使用">在 React 中 statics 对象是否能与 ES6 类一起使用?</a></td>
</tr>
<tr>
<td>210</td>
<td><a href="#redux-只能与-react-一起使用么">Redux 只能与 React 一起使用么?</a></td>
</tr>
<tr>
<td>211</td>
<td><a href="#您是否需要使用特定的构建工具来使用-redux-">您是否需要使用特定的构建工具来使用 Redux ?</a></td>
</tr>
<tr>
<td>212</td>
<td><a href="#redux-form-的-initialvalues-如何从状态更新">Redux Form 的 <code>initialValues</code> 如何从状态更新?</a></td>
</tr>
<tr>
<td>213</td>
<td><a href="#react-是如何为一个属性声明不同的类型">React 是如何为一个属性声明不同的类型?</a></td>
</tr>
<tr>
<td>214</td>
<td><a href="#我可以导入一个-svg-文件作为-react-组件么">我可以导入一个 SVG 文件作为 React 组件么?</a></td>
</tr>
<tr>
<td>215</td>
<td><a href="#为什么不建议使用内联引用回调或函数">为什么不建议使用内联引用回调或函数?</a></td>
</tr>
<tr>
<td>216</td>
<td><a href="#在-react-中什么是渲染劫持">在 React 中什么是渲染劫持?</a></td>
</tr>
<tr>
<td>217</td>
<td><a href="#什么是-hoc-工厂实现">什么是 HOC 工厂实现?</a></td>
</tr>
<tr>
<td>218</td>
<td><a href="#如何传递数字给-react-组件">如何传递数字给 React 组件?</a></td>
</tr>
<tr>
<td>219</td>
<td><a href="#我需要将所有状态保存到-redux-中吗我应该使用-react-的内部状态吗">我需要将所有状态保存到 Redux 中吗？我应该使用 react 的内部状态吗?</a></td>
</tr>
<tr>
<td>220</td>
<td><a href="#在-react-中-registerserviceworker-的用途是什么">在 React 中 registerServiceWorker 的用途是什么?</a></td>
</tr>
<tr>
<td>221</td>
<td><a href="#react-memo-函数是什么">React memo 函数是什么?</a></td>
</tr>
<tr>
<td>222</td>
<td><a href="#react-lazy-函数是什么">React lazy 函数是什么?</a></td>
</tr>
<tr>
<td>223</td>
<td><a href="#如何使用-setstate-防止不必要的更新">如何使用 setState 防止不必要的更新?</a></td>
</tr>
<tr>
<td>224</td>
<td><a href="#如何在-react-16-版本中渲染数组、字符串和数值-">如何在 React 16 版本中渲染数组、字符串和数值? </a></td>
</tr>
<tr>
<td>225</td>
<td><a href="#如何在-react-类中使用类字段声明语法">如何在 React 类中使用类字段声明语法?</a></td>
</tr>
<tr>
<td>226</td>
<td><a href="#什么是-hooks">什么是 hooks?</a></td>
</tr>
<tr>
<td>227</td>
<td><a href="#hooks-需要遵循什么规则">Hooks 需要遵循什么规则?</a></td>
</tr>
<tr>
<td>228</td>
<td><a href="#如何确保钩子遵循正确的使用规则">如何确保钩子遵循正确的使用规则?</a></td>
</tr>
<tr>
<td>229</td>
<td><a href="#flux-和-redux-之间有什么区别">Flux 和 Redux 之间有什么区别?</a></td>
</tr>
<tr>
<td>230</td>
<td><a href="#react-router-v4-有什么好处">React Router V4 有什么好处?</a></td>
</tr>
<tr>
<td>231</td>
<td><a href="#您能描述一下-componentdidcatch-生命周期方法签名吗">您能描述一下 componentDidCatch 生命周期方法签名吗?</a></td>
</tr>
<tr>
<td>232</td>
<td><a href="#在哪些情况下错误边界不会捕获错误">在哪些情况下，错误边界不会捕获错误?</a></td>
</tr>
<tr>
<td>233</td>
<td><a href="#为什么事件处理器不需要错误边界">为什么事件处理器不需要错误边界?</a></td>
</tr>
<tr>
<td>234</td>
<td><a href="#try-catch-与错误边界有什么区别">try catch 与错误边界有什么区别?</a></td>
</tr>
<tr>
<td>235</td>
<td><a href="#react-16-中未捕获的错误的行为是什么">React 16 中未捕获的错误的行为是什么?</a></td>
</tr>
<tr>
<td>236</td>
<td><a href="#放置错误边界的正确位置是什么">放置错误边界的正确位置是什么?</a></td>
</tr>
<tr>
<td>237</td>
<td><a href="#从错误边界跟踪组件堆栈有什么好处">从错误边界跟踪组件堆栈有什么好处?</a></td>
</tr>
<tr>
<td>238</td>
<td><a href="#在定义类组件时什么是必须的方法">在定义类组件时，什么是必须的方法?</a></td>
</tr>
<tr>
<td>239</td>
<td><a href="#render-方法可能返回的类型是什么">render 方法可能返回的类型是什么?</a></td>
</tr>
<tr>
<td>240</td>
<td><a href="#构造函数的主要目的是什么">构造函数的主要目的是什么?</a></td>
</tr>
<tr>
<td>241</td>
<td><a href="#是否必须为-react-组件定义构造函数">是否必须为 React 组件定义构造函数?</a></td>
</tr>
<tr>
<td>242</td>
<td><a href="#什么是默认属性">什么是默认属性?</a></td>
</tr>
<tr>
<td>243</td>
<td><a href="#为什么不能在-componentwillunmount-中调用-setstate-方法">为什么不能在 componentWillUnmount 中调用 setState() 方法?</a></td>
</tr>
<tr>
<td>244</td>
<td><a href="#getderivedstatefromerror-的目的是什么">getDerivedStateFromError 的目的是什么?</a></td>
</tr>
<tr>
<td>245</td>
<td><a href="#当组件重新渲染时顺序执行的方法有哪些">当组件重新渲染时顺序执行的方法有哪些?</a></td>
</tr>
<tr>
<td>246</td>
<td><a href="#错误处理期间调用哪些方法">错误处理期间调用哪些方法?</a></td>
</tr>
<tr>
<td>247</td>
<td><a href="#displayname-类属性的用途是什么">displayName 类属性的用途是什么?</a></td>
</tr>
<tr>
<td>248</td>
<td><a href="#支持-react-应用程序的浏览器有哪一些">支持 React 应用程序的浏览器有哪一些?</a></td>
</tr>
<tr>
<td>249</td>
<td><a href="#unmountcomponentatnode-方法的目的是什么">unmountComponentAtNode 方法的目的是什么?</a></td>
</tr>
<tr>
<td>250</td>
<td><a href="#什么是代码拆分">什么是代码拆分?</a></td>
</tr>
<tr>
<td>251</td>
<td><a href="#严格模式有什么好处">严格模式有什么好处?</a></td>
</tr>
<tr>
<td>252</td>
<td><a href="#什么是-keyed-fragments-">什么是 Keyed Fragments ?</a></td>
</tr>
<tr>
<td>253</td>
<td><a href="#react-支持所有的-html-属性么">React 支持所有的 HTML 属性么?</a></td>
</tr>
<tr>
<td>254</td>
<td><a href="#hoc-有哪些限制">HOC 有哪些限制?</a></td>
</tr>
<tr>
<td>255</td>
<td><a href="#如何在-devtools-中调试-forwardrefs">如何在 DevTools 中调试 forwardRefs?</a></td>
</tr>
<tr>
<td>256</td>
<td><a href="#什么时候组件的-props-属性默认为-true">什么时候组件的 props 属性默认为 true?</a></td>
</tr>
<tr>
<td>257</td>
<td><a href="#什么是-nextjs-及其主要特征">什么是 NextJS 及其主要特征?</a></td>
</tr>
<tr>
<td>258</td>
<td><a href="#如何将事件处理程序传递给组件">如何将事件处理程序传递给组件?</a></td>
</tr>
<tr>
<td>259</td>
<td><a href="#在渲染方法中使用箭头函数好么">在渲染方法中使用箭头函数好么?</a></td>
</tr>
<tr>
<td>260</td>
<td><a href="#如何防止函数被多次调用">如何防止函数被多次调用?</a></td>
</tr>
<tr>
<td>261</td>
<td><a href="#jsx-如何防止注入攻击">JSX 如何防止注入攻击?</a></td>
</tr>
<tr>
<td>262</td>
<td><a href="#如何更新已渲染的元素">如何更新已渲染的元素?</a></td>
</tr>
<tr>
<td>263</td>
<td><a href="#你怎么说-props-是只读的">你怎么说 props 是只读的?</a></td>
</tr>
<tr>
<td>264</td>
<td><a href="#你认为状态更新是如何合并的">你认为状态更新是如何合并的?</a></td>
</tr>
<tr>
<td>265</td>
<td><a href="#如何将参数传递给事件处理程序">如何将参数传递给事件处理程序?</a></td>
</tr>
<tr>
<td>266</td>
<td><a href="#如何防止组件渲染">如何防止组件渲染?</a></td>
</tr>
<tr>
<td>267</td>
<td><a href="#安全地使用索引作为键的条件是什么">安全地使用索引作为键的条件是什么?</a></td>
</tr>
<tr>
<td>268</td>
<td><a href="#keys-是否需要全局唯一">keys 是否需要全局唯一?</a></td>
</tr>
<tr>
<td>269</td>
<td><a href="#用于表单处理的流行选择是什么">用于表单处理的流行选择是什么?</a></td>
</tr>
<tr>
<td>270</td>
<td><a href="#formik-相对于其他-redux-表单库有什么优势">formik 相对于其他 redux 表单库有什么优势?</a></td>
</tr>
<tr>
<td>271</td>
<td><a href="#为什么不需要使用继承">为什么不需要使用继承?</a></td>
</tr>
<tr>
<td>272</td>
<td><a href="#我可以在-react-应用程序中可以使用-web-components-么">我可以在 React 应用程序中可以使用 web components 么?</a></td>
</tr>
<tr>
<td>273</td>
<td><a href="#什么是动态导入">什么是动态导入?</a></td>
</tr>
<tr>
<td>274</td>
<td><a href="#什么是-loadable-组件">什么是 loadable 组件?</a></td>
</tr>
<tr>
<td>275</td>
<td><a href="#什么是-suspense-组件">什么是 suspense 组件?</a></td>
</tr>
<tr>
<td>276</td>
<td><a href="#什么是基于路由的代码拆分">什么是基于路由的代码拆分?</a></td>
</tr>
<tr>
<td>277</td>
<td><a href="#举例说明如何使用-context">举例说明如何使用 context?</a></td>
</tr>
<tr>
<td>278</td>
<td><a href="#在-context-中默认值的目的是什么">在 context 中默认值的目的是什么?</a></td>
</tr>
<tr>
<td>279</td>
<td><a href="#你是怎么使用-contexttype">你是怎么使用 contextType?</a></td>
</tr>
<tr>
<td>280</td>
<td><a href="#什么是-consumer">什么是 consumer?</a></td>
</tr>
<tr>
<td>281</td>
<td><a href="#在使用-context-时如何解决性能方面的问题">在使用 context 时，如何解决性能方面的问题?</a></td>
</tr>
<tr>
<td>282</td>
<td><a href="#在-hocs-中-forward-ref-的目的是什么">在 HOCs 中 forward ref 的目的是什么?</a></td>
</tr>
<tr>
<td>283</td>
<td><a href="#ref-参数对于所有函数或类组件是否可用">ref 参数对于所有函数或类组件是否可用?</a></td>
</tr>
<tr>
<td>284</td>
<td><a href="#在组件库中当使用-forward-refs-时你需要额外的注意">在组件库中当使用 forward refs 时，你需要额外的注意?</a></td>
</tr>
<tr>
<td>285</td>
<td><a href="#如何在没有-es6-的情况下创建-react-类组件">如何在没有 ES6 的情况下创建 React 类组件</a></td>
</tr>
<tr>
<td>286</td>
<td><a href="#是否可以在没有-jsx-的情况下使用-react">是否可以在没有 JSX 的情况下使用 React?</a></td>
</tr>
<tr>
<td>287</td>
<td><a href="#什么是差异算法">什么是差异算法?</a></td>
</tr>
<tr>
<td>288</td>
<td><a href="#差异算法涵盖了哪些规则">差异算法涵盖了哪些规则?</a></td>
</tr>
<tr>
<td>289</td>
<td><a href="#你什么时候需要使用-refs">你什么时候需要使用 refs?</a></td>
</tr>
<tr>
<td>290</td>
<td><a href="#对于渲染属性来说是否必须将-prop-属性命名为-render">对于渲染属性来说是否必须将 prop 属性命名为 render?</a></td>
</tr>
<tr>
<td>291</td>
<td><a href="#在-pure-component-中使用渲染属性会有什么问题">在 Pure Component 中使用渲染属性会有什么问题?</a></td>
</tr>
<tr>
<td>292</td>
<td><a href="#如何使用渲染属性创建-hoc">如何使用渲染属性创建 HOC?</a></td>
</tr>
<tr>
<td>293</td>
<td><a href="#什么是-windowing-技术">什么是 windowing 技术?</a></td>
</tr>
<tr>
<td>294</td>
<td><a href="#你如何在-jsx-中打印-falsy-值">你如何在 JSX 中打印 falsy 值?</a></td>
</tr>
<tr>
<td>295</td>
<td><a href="#portals-的典型使用场景是什么">portals 的典型使用场景是什么?</a></td>
</tr>
<tr>
<td>296</td>
<td><a href="#如何设置非受控组件的默认值">如何设置非受控组件的默认值?</a></td>
</tr>
<tr>
<td>297</td>
<td><a href="#你最喜欢的-react-技术栈是什么">你最喜欢的 React 技术栈是什么?</a></td>
</tr>
<tr>
<td>298</td>
<td><a href="#real-dom-和-virtual-dom-有什么区别">Real DOM 和 Virtual DOM 有什么区别?</a></td>
</tr>
<tr>
<td>299</td>
<td><a href="#如何为-react-应用程序添加-bootstrap">如何为 React 应用程序添加 bootstrap?</a></td>
</tr>
<tr>
<td>300</td>
<td><a href="#你能否列出使用-react-作为前端框架的顶级网站或应用程序">你能否列出使用 React 作为前端框架的顶级网站或应用程序?</a></td>
</tr>
<tr>
<td>301</td>
<td><a href="#是否建议在-react-中使用-css-in-js-技术">是否建议在 React 中使用 CSS In JS 技术?</a></td>
</tr>
</tbody>
</table>
<!-- /TOC -->
<h2 id="Core-React"><a href="#Core-React" class="headerlink" title="Core React"></a>Core React</h2><ol>
<li><h3 id="什么是-React"><a href="#什么是-React" class="headerlink" title="什么是 React?"></a>什么是 React?</h3><p> <a href="https://reactjs.org/" target="_blank" rel="noopener">React</a> 是一个<strong>开源前端 JavaScript 库</strong>，用于构建用户界面，尤其是单页应用程序。它用于处理网页和移动应用程序的视图层。React 是由 Facebook 的软件工程师 Jordan Walke 创建的。在 2011 年 React 应用首次被部署到 Facebook 的信息流中，之后于 2012 年被应用到 Instagram 上。</p>
<p> 阅读资源：</p>
<ol>
<li><a href="https://react.docschina.org/docs/hello-world.html" target="_blank" rel="noopener">React 中文文档</a></li>
<li><a href="https://juejin.im/post/5b481f6b51882519ad6175c2" target="_blank" rel="noopener">掘金 - 图解 React</a></li>
<li><p><a href="https://juejin.im/post/5c0c7304f265da613e22106c" target="_blank" rel="noopener">掘金 - 200行代码实现简版react</a></p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
</li>
<li><h3 id="React-的主要特点是什么"><a href="#React-的主要特点是什么" class="headerlink" title="React 的主要特点是什么?"></a>React 的主要特点是什么?</h3><p> React 的主要特性有：</p>
<ul>
<li>考虑到真实的 DOM 操作成本很高，它使用 VirtualDOM 而不是真实的 DOM。</li>
<li>支持服务端渲染。</li>
<li>遵循单向数据流或数据绑定。</li>
<li><p>使用可复用/可组合的 UI 组件开发视图。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ul>
</li>
<li><h3 id="什么是-JSX"><a href="#什么是-JSX" class="headerlink" title="什么是 JSX?"></a>什么是 JSX?</h3><p> JSX 是 ECMAScript 一个类似 XML 的语法扩展。基本上，它只是为 <code>React.createElement()</code> 函数提供语法糖，从而让在我们在 JavaScript 中，使用类 HTML 模板的语法，进行页面描述。</p>
<p> 在下面的示例中，<code>&lt;h1&gt;</code> 内的文本标签会作为 JavaScript 函数返回给渲染函数。</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span>(</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;h1&gt;&#123;<span class="string">'Welcome to React world!'</span>&#125;&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p> 以上示例 render 方法中的 JSX 将会被转换为以下内容：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">React.createElement(<span class="string">"div"</span>, <span class="literal">null</span>, React.createElement(</span><br><span class="line">  <span class="string">"h1"</span>, <span class="literal">null</span>, <span class="string">'Welcome to React world!'</span>));</span><br></pre></td></tr></table></figure>
<p> 这里你可以访问 <a href="https://babeljs.io/repl" target="_blank" rel="noopener">Babeljs</a> 在线体验一下。</p>
<p> 阅读资源：</p>
<ol>
<li><p><a href="https://github.com/hujiulong/blog/issues/4" target="_blank" rel="noopener">从零开始实现一个React（一）：JSX和虚拟DOM </a></p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
</li>
<li><h3 id="元素和组件有什么区别"><a href="#元素和组件有什么区别" class="headerlink" title="元素和组件有什么区别?"></a>元素和组件有什么区别?</h3><p> 一个 <em>Element</em> 是一个简单的对象，它描述了你希望在屏幕上以 DOM 节点或其他组件的形式呈现的内容。<em>Elements</em> 在它们的属性中可以包含其他 <em>Elements</em>。创建一个 React 元素是很轻量的。一旦元素被创建后，它将不会被修改。</p>
<p> React Element 的对象表示如下：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> element = React.createElement(</span><br><span class="line">  <span class="string">'div'</span>,</span><br><span class="line">  &#123;<span class="attr">id</span>: <span class="string">'login-btn'</span>&#125;,</span><br><span class="line">  <span class="string">'Login'</span></span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p> 上面的 <code>React.createElement()</code> 函数会返回一个对象。</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  type: &apos;div&apos;,</span><br><span class="line">  props: &#123;</span><br><span class="line">    children: &apos;Login&apos;,</span><br><span class="line">    id: &apos;login-btn&apos;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p> 最后使用 <code>ReactDOM.render()</code> 方法渲染到 DOM：</p>
 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">'login-btn'</span>&gt;</span>Login<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p> 而一个组件可以用多种不同方式声明。它可以是一个含有 <code>render()</code> 方法的类。或者，在简单的情况中，它可以定义为函数。无论哪种情况，它都将 props 作为输入，并返回一个 JSX 树作为输出：</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Button = <span class="function">(<span class="params">&#123; onLogin &#125;</span>) =&gt;</span></span><br><span class="line">  &lt;div id=&#123;<span class="string">'login-btn'</span>&#125; onClick=&#123;onLogin&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p> 然后 JSX 被转换成 <code>React.createElement()</code> 函数：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Button = <span class="function">(<span class="params">&#123; onLogin &#125;</span>) =&gt;</span> React.createElement(</span><br><span class="line">  <span class="string">'div'</span>,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="string">'login-btn'</span>, <span class="attr">onClick</span>: onLogin &#125;,</span><br><span class="line">  <span class="string">'Login'</span></span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p> <strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-中创建组件"><a href="#如何在-React-中创建组件" class="headerlink" title="如何在 React 中创建组件?"></a>如何在 React 中创建组件?</h3><p> 有两种可行的方法来创建一个组件：</p>
<ol>
<li><p><strong>Function Components:</strong> 这是创建组件最简单的方式。这些是纯 JavaScript 函数，接受 props 对象作为第一个参数并返回 React 元素：</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Greeting</span>(<span class="params">&#123; message &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;`Hello, $&#123;message&#125;`&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>Class Components:</strong> 你还可以使用 ES6 类来定义组件。上面的函数组件若使用 ES6 的类可改写为：</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Greeting</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;`Hello, $&#123;this.props.message&#125;`&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
</li>
<li><h3 id="何时使用类组件和函数组件"><a href="#何时使用类组件和函数组件" class="headerlink" title="何时使用类组件和函数组件?"></a>何时使用类组件和函数组件?</h3><p> 如果组件需要使用<strong>状态或生命周期方法</strong>，那么使用类组件，否则使用函数组件。</p>
<p> <strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Pure-Components"><a href="#什么是-Pure-Components" class="headerlink" title="什么是 Pure Components?"></a>什么是 Pure Components?</h3><p> <code>React.PureComponent</code> 与 <code>React.Component</code> 完全相同，只是它为你处理了 <code>shouldComponentUpdate()</code> 方法。当属性或状态发生变化时，PureComponent 将对属性和状态进行<strong>浅比较</strong>。另一方面，一般的组件不会将当前的属性和状态与新的属性和状态进行比较。因此，在默认情况下，每当调用 <code>shouldComponentUpdate</code> 时，默认返回 true，所以组件都将重新渲染。</p>
<p> <strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-的状态是什么"><a href="#React-的状态是什么" class="headerlink" title="React 的状态是什么?"></a>React 的状态是什么?</h3><p> 组件的状态是一个对象，它包含某些信息，这些信息可能在组件的生命周期中发生更改。我们应该尽量使状态尽可能简单，并尽量减少有状态组件的数量。让我们创建一个包含消息状态的 User 组件：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.state = &#123;</span><br><span class="line">      message: <span class="string">'Welcome to React world'</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;h1&gt;&#123;<span class="keyword">this</span>.state.message&#125;&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p> <img src="images/state.jpg" alt="state"></p>
<p> 状态（State）与属性（Props）类似，但它是私有的，完全由组件控制。也就是说，除了它所属的组件外，任何组件都无法访问它。</p>
<p> <strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-中的-props-是什么"><a href="#React-中的-props-是什么" class="headerlink" title="React 中的 props 是什么?"></a>React 中的 props 是什么?</h3><p> Props 是组件的输入。它们是单个值或包含一组值的对象，这些值在创建时使用类似于 HTML 标记属性的命名约定传递给组件。它们是从父组件传递到子组件的数据。</p>
<p> Props 的主要目的是提供以下组件功能：</p>
<ol>
<li>将自定义数据传递到组件。</li>
<li>触发状态更改。</li>
<li><p>在组件的 <code>render()</code> 方法中通过 <code>this.props.reactProp</code> 使用。</p>
<p>例如，让我们使用 <code>reactProp</code> 属性创建一个元素：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;Element reactProp=&#123;<span class="string">'1'</span>&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p>然后，<code>reactProp</code> 将成为附加到 React props 对象的属性，该对象最初已存在于使用 React 库创建的所有组件上。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">props.reactProp</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
</li>
<li><h3 id="状态和属性有什么区别"><a href="#状态和属性有什么区别" class="headerlink" title="状态和属性有什么区别?"></a>状态和属性有什么区别?</h3><p>state 和 props 都是普通的 JavaScript 对象。虽然它们都保存着影响渲染输出的信息，但它们在组件方面的功能不同。Props 以类似于函数参数的方式传递给组件，而状态则类似于在函数内声明变量并对它进行管理。</p>
<p>States vs Props</p>
<p>| Conditions           | States | Props |<br>| ——————– | —— | —– |<br>| 可从父组件接收初始值 | 是     | 是    |<br>| 可在父组件中改变其值 | 否     | 是    |<br>| 在组件内设置默认值   | 是     | 是    |<br>| 在组件内可改变       | 是     | 否    |<br>| 可作为子组件的初始值 | 是     | 是    |</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="我们为什么不能直接更新状态"><a href="#我们为什么不能直接更新状态" class="headerlink" title="我们为什么不能直接更新状态?"></a>我们为什么不能直接更新状态?</h3><p>如果你尝试直接改变状态，那么组件将不会重新渲染。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Wrong</span></span><br><span class="line"><span class="keyword">this</span>.state.message = <span class="string">'Hello world'</span></span><br></pre></td></tr></table></figure>
<p>正确方法应该是使用 <code>setState()</code> 方法。它调度组件状态对象的更新。当状态更改时，组件通将会重新渲染。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Correct</span></span><br><span class="line"><span class="keyword">this</span>.setState(&#123; <span class="attr">message</span>: <span class="string">'Hello World'</span> &#125;)</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 你可以在 <em>constructor</em> 中或使用最新的 JavaScript 类属性声明语法直接设置状态对象。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="回调函数作为-setState-参数的目的是什么"><a href="#回调函数作为-setState-参数的目的是什么" class="headerlink" title="回调函数作为 setState() 参数的目的是什么?"></a>回调函数作为 <code>setState()</code> 参数的目的是什么?</h3><p>当 setState 完成和组件渲染后，回调函数将会被调用。由于 <code>setState()</code> 是异步的，回调函数用于任何后续的操作。</p>
<p><strong>注意：</strong> 建议使用生命周期方法而不是此回调函数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">setState(&#123; <span class="attr">name</span>: <span class="string">'John'</span> &#125;, () =&gt; <span class="built_in">console</span>.log(<span class="string">'The name has updated and component re-rendered'</span>))</span><br></pre></td></tr></table></figure>
<p>阅读资源：</p>
<ol>
<li><a href="https://juejin.im/post/5b87d14e6fb9a01a18268caf" target="_blank" rel="noopener">掘金 - 揭密React setState</a></li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="HTML-和-React-事件处理有什么区别"><a href="#HTML-和-React-事件处理有什么区别" class="headerlink" title="HTML 和 React 事件处理有什么区别?"></a>HTML 和 React 事件处理有什么区别?</h3><ol>
<li>在 HTML 中事件名必须小写：</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">'activateLasers()'</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>而在 React 中它遵循 <em>camelCase</em> (驼峰) 惯例：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick=&#123;activateLasers&#125;&gt;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>在 HTML 中你可以返回 <code>false</code> 以阻止默认的行为：</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">'#'</span> <span class="attr">onclick</span>=<span class="string">'console.log("The link was clicked."); return false;'</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p>而在 React 中你必须地明确地调用 <code>preventDefault()</code> ：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handleClick</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">  event.preventDefault()</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'The link was clicked.'</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-JSX-回调中绑定方法或事件处理程序"><a href="#如何在-JSX-回调中绑定方法或事件处理程序" class="headerlink" title="如何在 JSX 回调中绑定方法或事件处理程序?"></a>如何在 JSX 回调中绑定方法或事件处理程序?</h3><p>实现这一点有三种可能的方法：</p>
<ol>
<li><strong>Binding in Constructor:</strong> 在 JavaScript 类中，方法默认不被绑定。这也适用于定义为类方法的 React 事件处理程序。通常我们在构造函数中绑定它们。</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Component</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Componenet</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line">    <span class="keyword">this</span>.handleClick = <span class="keyword">this</span>.handleClick.bind(<span class="keyword">this</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  handleClick() &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li><strong>Public class fields syntax:</strong> 如果你不喜欢 bind 方案，则可以使用 <em>public class fields syntax</em> 正确绑定回调。</li>
</ol>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">handleClick = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'this is:'</span>, <span class="keyword">this</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick=&#123;<span class="keyword">this</span>.handleClick&#125;&gt;</span><br><span class="line">  &#123;<span class="string">'Click me'</span>&#125;</span><br><span class="line">&lt;<span class="regexp">/button&gt;</span></span><br></pre></td></tr></table></figure>
<ol start="3">
<li><strong>Arrow functions in callbacks:</strong> 你可以在回调函数中直接使用 <em>arrow functions</em>。</li>
</ol>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick=&#123;(event) =&gt; <span class="keyword">this</span>.handleClick(event)&#125;&gt;</span><br><span class="line">  &#123;<span class="string">'Click me'</span>&#125;</span><br><span class="line">&lt;<span class="regexp">/button&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 如果回调函数作为属性传给子组件，那么这些组件可能触发一个额外的重新渲染。在这些情况下，考虑到性能，最好使用 <code>.bind()</code> 或 <em>public class fields syntax</em> 方案。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何将参数传递给事件处理程序或回调函数"><a href="#如何将参数传递给事件处理程序或回调函数" class="headerlink" title="如何将参数传递给事件处理程序或回调函数?"></a>如何将参数传递给事件处理程序或回调函数?</h3><p>你可以使用箭头函数来包装事件处理器并传递参数：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick=&#123;() =&gt; <span class="keyword">this</span>.handleClick(id)&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p>这相当于调用 <code>.bind</code>:</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick=&#123;<span class="keyword">this</span>.handleClick.bind(<span class="keyword">this</span>, id)&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-中的合成事件是什么"><a href="#React-中的合成事件是什么" class="headerlink" title="React 中的合成事件是什么?"></a>React 中的合成事件是什么?</h3><p><code>SyntheticEvent</code> 是对浏览器原生事件的跨浏览器包装。它的 API 与浏览器的原生事件相同，包括 <code>stopPropagation()</code> 和 <code>preventDefault()</code>，除了事件在所有浏览器中的工作方式相同。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是内联条件表达式"><a href="#什么是内联条件表达式" class="headerlink" title="什么是内联条件表达式?"></a>什么是内联条件表达式?</h3><p>在 JS 中你可以使用 if 语句或三元表达式，来实现条件判断。除了这些方法之外，你还可以在 JSX 中嵌入任何表达式，方法是将它们用大括号括起来，然后再加上 JS 逻辑运算符 <code>&amp;&amp;</code>。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1&gt;Hello!<span class="xml"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">&#123;</span><br><span class="line">    messages.length &gt; <span class="number">0</span> &amp;&amp; !isLogin ?</span><br><span class="line">      &lt;h2&gt;</span><br><span class="line">          You have &#123;messages.length&#125; unread messages.</span><br><span class="line">      &lt;<span class="regexp">/h2&gt;</span></span><br><span class="line"><span class="regexp">      :</span></span><br><span class="line"><span class="regexp">      &lt;h2&gt;</span></span><br><span class="line"><span class="regexp">          You don't have unread messages.</span></span><br><span class="line"><span class="regexp">      &lt;/</span>h2&gt;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<pre><code>当然如果只是想判断 if，可以如下直接判断：

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    isLogin &amp;&amp; &lt;span&gt;Your have been login!&lt;/span&gt;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


在上面的代码中，不需要使用`isLogin ? &lt;span&gt;Your have been login!&lt;/span&gt; : null`这样的形式。

**[⬆ 返回顶部](#目录)**
</code></pre><ol start="18">
<li><h3 id="什么是-“key”-属性，在元素数组中使用它们有什么好处"><a href="#什么是-“key”-属性，在元素数组中使用它们有什么好处" class="headerlink" title="什么是 “key” 属性，在元素数组中使用它们有什么好处?"></a>什么是 “key” 属性，在元素数组中使用它们有什么好处?</h3><p><code>key</code> 是一个特殊的字符串属性，你在创建元素数组时需要包含它。<em>Keys</em> 帮助 React 识别哪些项已更改、添加或删除。</p>
<p>我们通常使用数据中的 IDs 作为 <em>keys</em>:</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> todoItems = todos.map(<span class="function">(<span class="params">todo</span>) =&gt;</span></span><br><span class="line">  &lt;li key=&#123;todo.id&#125;&gt;</span><br><span class="line">    &#123;todo.text&#125;</span><br><span class="line">  &lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">)</span></span><br></pre></td></tr></table></figure>
<p>在渲染列表项时，如果你没有稳定的 IDs，你可能会使用 <em>index</em> 作为 <em>key</em>：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> todoItems = todos.map(<span class="function">(<span class="params">todo, index</span>) =&gt;</span></span><br><span class="line">  &lt;li key=&#123;index&#125;&gt;</span><br><span class="line">    &#123;todo.text&#125;</span><br><span class="line">  &lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">)</span></span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong></p>
<ol>
<li>由于列表项的顺序可能发生改变，因此并不推荐使用 <em>indexes</em> 作为 <em>keys</em>。这可能会对性能产生负面影响，并可能导致组件状态出现问题。</li>
<li>如果将列表项提取为单独的组件，则在列表组件上应用 <em>keys</em> 而不是 <code>li</code> 标签。</li>
<li>如果在列表项中没有设置 <code>key</code> 属性，在控制台会显示警告消息。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="refs-有什么用"><a href="#refs-有什么用" class="headerlink" title="refs 有什么用?"></a>refs 有什么用?</h3><p><em>ref</em> 用于返回对元素的引用。但在大多数情况下，应该避免使用它们。当你需要直接访问 DOM 元素或组件的实例时，它们可能非常有用。</p>
</li>
<li><h3 id="如何创建-refs"><a href="#如何创建-refs" class="headerlink" title="如何创建 refs?"></a>如何创建 refs?</h3><p>这里有两种方案</p>
<ol>
<li>这是最近增加的一种方案。<em>Refs</em> 是使用 <code>React.createRef()</code> 方法创建的，并通过 <code>ref</code> 属性添加到 React 元素上。为了在整个组件中使用<em>refs</em>，只需将 <em>ref</em> 分配给构造函数中的实例属性。</li>
</ol>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line">    <span class="keyword">this</span>.myRef = React.createRef()</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">ref</span>=<span class="string">&#123;this.myRef&#125;</span> /&gt;</span></span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<ol start="2">
<li>你也可以使用 ref 回调函数的方案，而不用考虑 React 版本。例如，访问搜索栏组件中的 <code>input</code> 元素如下：</li>
</ol>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SearchBar</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">   <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">      <span class="keyword">super</span>(props);</span><br><span class="line">      <span class="keyword">this</span>.txtSearch = <span class="literal">null</span>;</span><br><span class="line">      <span class="keyword">this</span>.state = &#123; <span class="attr">term</span>: <span class="string">''</span> &#125;;</span><br><span class="line">      <span class="keyword">this</span>.setInputSearchRef = <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">         <span class="keyword">this</span>.txtSearch = e;</span><br><span class="line">      &#125;</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   onInputChange(event) &#123;</span><br><span class="line">      <span class="keyword">this</span>.setState(&#123; <span class="attr">term</span>: <span class="keyword">this</span>.txtSearch.value &#125;);</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   render() &#123;</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">         &lt;input</span><br><span class="line">            value=&#123;<span class="keyword">this</span>.state.term&#125;</span><br><span class="line">            onChange=&#123;<span class="keyword">this</span>.onInputChange.bind(<span class="keyword">this</span>)&#125;</span><br><span class="line">            ref=&#123;<span class="keyword">this</span>.setInputSearchRef&#125; /&gt;</span><br><span class="line">      );</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>你也可以在使用 <strong>closures</strong> 的函数组件中使用 <em>refs</em>。</p>
<p><strong>注意：</strong> 你也可以使用内联引用回调，尽管这不是推荐的方法。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-forward-refs"><a href="#什么是-forward-refs" class="headerlink" title="什么是 forward refs?"></a>什么是 forward refs?</h3><p><em>Ref forwarding</em> 是一个特性，它允许一些组件获取接收到 <em>ref</em> 对象并将它进一步传递给子组件。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> ButtonElement = React.forwardRef(<span class="function">(<span class="params">props, ref</span>) =&gt;</span> (</span><br><span class="line">  &lt;button ref=&#123;ref&#125; className=<span class="string">"CustomButton"</span>&gt;</span><br><span class="line">    &#123;props.children&#125;</span><br><span class="line">  &lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">));</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ Create ref to the DOM button:</span></span><br><span class="line"><span class="regexp">const ref = React.createRef();</span></span><br><span class="line"><span class="regexp">&lt;ButtonElement ref=&#123;ref&#125;&gt;&#123;'Forward Ref'&#125;&lt;/</span>ButtonElement&gt;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="callback-refs-和-findDOMNode-哪一个是首选选项"><a href="#callback-refs-和-findDOMNode-哪一个是首选选项" class="headerlink" title="callback refs 和 findDOMNode() 哪一个是首选选项?"></a>callback refs 和 findDOMNode() 哪一个是首选选项?</h3><p>最好是使用 <em>callback refs</em> 而不是 <code>findDOMNode()</code> API。因为 <code>findDOMNode()</code> 阻碍了将来对 React 的某些改进。</p>
<p>使用 <code>findDOMNode</code> 已弃用的方案：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  componentDidMount() &#123;</span><br><span class="line">    findDOMNode(<span class="keyword">this</span>).scrollIntoView()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span> /&gt;</span></span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p>推荐的方案是：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  componentDidMount() &#123;</span><br><span class="line">    <span class="keyword">this</span>.node.scrollIntoView()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">ref</span>=<span class="string">&#123;node</span> =&gt;</span> this.node = node&#125; /&gt;</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么-String-Refs-被弃用"><a href="#为什么-String-Refs-被弃用" class="headerlink" title="为什么 String Refs 被弃用?"></a>为什么 String Refs 被弃用?</h3><p>如果你以前使用过 React，你可能会熟悉旧的 API，其中的 <code>ref</code> 属性是字符串，如 <code>ref={&#39;textInput&#39;}</code>，并且 DOM 节点的访问方式为<code>this.refs.textInput</code>。我们建议不要这样做，因为字符串引用有以下问题，并且被认为是遗留问题。字符串 refs 在 React v16 版本中被移除。</p>
<ol>
<li>它们强制 React 跟踪当前执行的组件。这是有问题的，因为它使 React 模块有状态，这会导致在 bundle 中复制 React 模块时会导致奇怪的错误。</li>
<li>它们是不可组合的 - 如果一个库把一个 ref 传给子元素，则用户无法对其设置另一个引用。</li>
<li>它们不能与静态分析工具一起使用，如 Flow。Flow 无法猜测出 <code>this.refs</code> 上的字符串引用的作用及其类型。Callback refs 对静态分析更友好。</li>
<li><p>使用 “render callback” 模式（比如： <datagrid renderrow="{this.renderRow}">），它无法像大多数人预期的那样工作。</datagrid></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  renderRow = <span class="function">(<span class="params">index</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// This won't work. Ref will get attached to DataTable rather than MyComponent:</span></span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">ref</span>=<span class="string">&#123;</span>'<span class="attr">input-</span>' + <span class="attr">index</span>&#125; /&gt;</span>;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">    // This would work though! Callback refs are awesome.</span></span><br><span class="line">    return &lt;input ref=&#123;input =&gt; this['input-' + index] = input&#125; /&gt;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    return &lt;DataTable data=&#123;this.props.data&#125; renderRow=&#123;this.renderRow&#125; /&gt;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Virtual-DOM"><a href="#什么是-Virtual-DOM" class="headerlink" title="什么是 Virtual DOM?"></a>什么是 Virtual DOM?</h3><p><em>Virtual DOM</em> (VDOM) 是 <em>Real DOM</em> 的内存表示形式。UI 的展示形式被保存在内存中并与真实的 DOM 同步。这是在调用的渲染函数和在屏幕上显示元素之间发生的一个步骤。整个过程被称为 <em>reconciliation</em>。</p>
<p>Real DOM vs Virtual DOM</p>
<p>|           Real DOM           |       Virtual DOM        |<br>| :————————–: | :———————-: |<br>|           更新较慢           |         更新较快         |<br>|      可以直接更新 HTML       |    无法直接更新 HTML     |<br>| 如果元素更新，则创建新的 DOM | 如果元素更新，则更新 JSX |<br>|       DOM 操作非常昂贵       |     DOM 操作非常简单     |<br>|        较多的内存浪费        |       没有内存浪费       |</p>
<p>阅读资源：</p>
<ol>
<li><a href="https://www.zhihu.com/question/29504639" target="_blank" rel="noopener">知乎 - 如何理解虚拟DOM?</a></li>
<li><a href="https://www.edureka.co/blog/interview-questions/react-interview-questions/" target="_blank" rel="noopener">edureka - react-interview-questions</a></li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Virtual-DOM-如何工作"><a href="#Virtual-DOM-如何工作" class="headerlink" title="Virtual DOM 如何工作?"></a>Virtual DOM 如何工作?</h3><p><em>Virtual DOM</em> 分为三个简单的步骤。</p>
<ol>
<li><p>每当任何底层数据发生更改时，整个 UI 都将以 Virtual DOM 的形式重新渲染。<br> <img src="images/vdom1.png" alt="vdom"></p>
</li>
<li><p>然后计算先前 Virtual DOM 对象和新的 Virtual DOM 对象之间的差异。<br> <img src="images/vdom2.png" alt="vdom2"></p>
</li>
<li><p>一旦计算完成，真实的 DOM 将只更新实际更改的内容。<br> <img src="images/vdom3.png" alt="vdom3"></p>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Shadow-DOM-和-Virtual-DOM-之间有什么区别"><a href="#Shadow-DOM-和-Virtual-DOM-之间有什么区别" class="headerlink" title="Shadow DOM 和 Virtual DOM 之间有什么区别?"></a>Shadow DOM 和 Virtual DOM 之间有什么区别?</h3><p><a href="https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn" target="_blank" rel="noopener">Shadow DOM</a> 是一种浏览器技术，它解决了构建网络应用的脆弱性问题。Shadow DOM 修复了 CSS 和 DOM。它在网络平台中引入作用域样式。 无需工具或命名约定，你即可使用原生 JavaScript 捆绑 CSS 和标记、隐藏实现详情以及编写独立的组件。<em>Virtual DOM</em> 是一个由 JavaScript 库在浏览器 API 之上实现的概念。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-React-Fiber"><a href="#什么是-React-Fiber" class="headerlink" title="什么是 React Fiber?"></a>什么是 React Fiber?</h3><p>Fiber 是 React v16 中新的 <em>reconciliation</em> 引擎，或核心算法的重新实现。React Fiber 的目标是提高对动画，布局，手势，暂停，中止或者重用任务的能力及为不同类型的更新分配优先级，及新的并发原语等领域的适用性。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-Fiber-的主要目标是什么"><a href="#React-Fiber-的主要目标是什么" class="headerlink" title="React Fiber 的主要目标是什么?"></a>React Fiber 的主要目标是什么?</h3><p><em>React Fiber</em> 的目标是提高其在动画、布局和手势等领域的适用性。它的主要特性是 <strong>incremental rendering</strong>: 将渲染任务拆分为小的任务块并将任务分配到多个帧上的能力。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是受控组件"><a href="#什么是受控组件" class="headerlink" title="什么是受控组件?"></a>什么是受控组件?</h3><p>在随后的用户输入中，能够控制表单中输入元素的组件被称为受控组件，即每个状态更改都有一个相关联的处理程序。</p>
<p>例如，我们使用下面的 handleChange 函数将输入框的值转换成大写：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">handleChange(event) &#123;</span><br><span class="line">  <span class="keyword">this</span>.setState(&#123;<span class="attr">value</span>: event.target.value.toUpperCase()&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是非受控组件"><a href="#什么是非受控组件" class="headerlink" title="什么是非受控组件?"></a>什么是非受控组件?</h3><p>非受控组件是在内部存储其自身状态的组件，当需要时，可以使用 ref 查询 DOM 并查找其当前值。这有点像传统的 HTML。</p>
<p>在下面的 UserProfile 组件中，我们通过 ref 引用 <code>name</code> 输入框：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">UserProfile</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line">    <span class="keyword">this</span>.handleSubmit = <span class="keyword">this</span>.handleSubmit.bind(<span class="keyword">this</span>)</span><br><span class="line">    <span class="keyword">this</span>.input = React.createRef()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  handleSubmit(event) &#123;</span><br><span class="line">    alert(<span class="string">'A name was submitted: '</span> + <span class="keyword">this</span>.input.current.value)</span><br><span class="line">    event.preventDefault()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;form onSubmit=&#123;<span class="keyword">this</span>.handleSubmit&#125;&gt;</span><br><span class="line">        &lt;label&gt;</span><br><span class="line">          &#123;<span class="string">'Name:'</span>&#125;</span><br><span class="line">          &lt;input type=<span class="string">"text"</span> ref=&#123;<span class="keyword">this</span>.input&#125; /&gt;</span><br><span class="line">        &lt;<span class="regexp">/label&gt;</span></span><br><span class="line"><span class="regexp">        &lt;input type="submit" value="Submit" /</span>&gt;</span><br><span class="line">      &lt;<span class="regexp">/form&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p>在大多数情况下，建议使用受控组件来实现表单。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="createElement-和-cloneElement-有什么区别"><a href="#createElement-和-cloneElement-有什么区别" class="headerlink" title="createElement 和 cloneElement 有什么区别?"></a>createElement 和 cloneElement 有什么区别?</h3><p>JSX 元素将被转换为 <code>React.createElement()</code> 函数来创建 React 元素，这些对象将用于表示 UI 对象。而 <code>cloneElement</code> 用于克隆元素并传递新的属性。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中的提升状态是什么"><a href="#在-React-中的提升状态是什么" class="headerlink" title="在 React 中的提升状态是什么?"></a>在 React 中的提升状态是什么?</h3><p>当多个组件需要共享相同的更改数据时，建议将共享状态提升到最接近的共同祖先。这意味着，如果两个子组件共享来自其父组件的相同数据，则将状态移动到父组件，而不是在两个子组件中维护局部状态。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="组件生命周期的不同阶段是什么"><a href="#组件生命周期的不同阶段是什么" class="headerlink" title="组件生命周期的不同阶段是什么?"></a>组件生命周期的不同阶段是什么?</h3><p>组件生命周期有三个不同的生命周期阶段：</p>
<ol>
<li><p><strong>Mounting:</strong> 组件已准备好挂载到浏览器的 DOM 中. 此阶段包含来自 <code>constructor()</code>, <code>getDerivedStateFromProps()</code>, <code>render()</code>, 和 <code>componentDidMount()</code> 生命周期方法中的初始化过程。</p>
</li>
<li><p><strong>Updating:</strong> 在此阶段，组件以两种方式更新，发送新的属性并使用 <code>setState()</code> 或 <code>forceUpdate()</code> 方法更新状态. 此阶段包含 <code>getDerivedStateFromProps()</code>, <code>shouldComponentUpdate()</code>, <code>render()</code>, <code>getSnapshotBeforeUpdate()</code> 和 <code>componentDidUpdate()</code> 生命周期方法。</p>
</li>
<li><p><strong>Unmounting:</strong> 在这个最后阶段，不需要组件，它将从浏览器 DOM 中卸载。这个阶段包含 <code>componentWillUnmount()</code> 生命周期方法。</p>
</li>
</ol>
<p>值得一提的是，在将更改应用到 DOM 时，React 内部也有阶段概念。它们按如下方式分隔开：</p>
<ol>
<li><p><strong>Render</strong> 组件将会进行无副作用渲染。这适用于纯组件（Pure Component），在此阶段，React 可以暂停，中止或重新渲染。</p>
</li>
<li><p><strong>Pre-commit</strong> 在组件实际将更改应用于 DOM 之前，有一个时刻允许 React 通过<code>getSnapshotBeforeUpdate()</code>捕获一些 DOM 信息（例如滚动位置）。</p>
</li>
<li><p><strong>Commit</strong> React 操作 DOM 并分别执行最后的生命周期： <code>componentDidMount()</code> 在 DOM 渲染完成后调用, <code>componentDidUpdate()</code> 在组件更新时调用,  <code>componentWillUnmount()</code> 在组件卸载时调用。<br>React 16.3+ 阶段 (也可以看<a href="http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/" target="_blank" rel="noopener">交互式版本</a>)</p>
</li>
</ol>
<p><img src="images/phases16.3.jpg" alt="phases 16.3+"></p>
<p>React 16.3 之前</p>
<p><img src="images/phases.png" alt="phases 16.2"></p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<ol start="34">
<li><h3 id="React-生命周期方法有哪些"><a href="#React-生命周期方法有哪些" class="headerlink" title="React 生命周期方法有哪些?"></a>React 生命周期方法有哪些?</h3><p>React 16.3+</p>
<ul>
<li><strong>getDerivedStateFromProps:</strong> 在调用<code>render()</code>之前调用，并在 <em>每次</em> 渲染时调用。 需要使用派生状态的情况是很罕见得。值得阅读 <a href="https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html" target="_blank" rel="noopener">如果你需要派生状态</a>.</li>
<li><strong>componentDidMount:</strong> 首次渲染后调用，所有得 Ajax 请求、DOM 或状态更新、设置事件监听器都应该在此处发生。</li>
<li><strong>shouldComponentUpdate:</strong> 确定组件是否应该更新。 默认情况下，它返回<code>true</code>。 如果你确定在更新状态或属性后不需要渲染组件，则可以返回<code>false</code>值。 它是一个提高性能的好地方，因为它允许你在组件接收新属性时阻止重新渲染。</li>
<li><strong>getSnapshotBeforeUpdate:</strong> 在最新的渲染输出提交给 DOM 前将会立即调用，这对于从 DOM 捕获信息（比如：滚动位置）很有用。</li>
<li><strong>componentDidUpdate:</strong> 它主要用于更新 DOM 以响应 prop 或 state 更改。 如果<code>shouldComponentUpdate()</code>返回<code>false</code>，则不会触发。</li>
<li><strong>componentWillUnmount</strong> 当一个组件被从 DOM 中移除时，该方法被调用，取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。</li>
</ul>
<p>Before 16.3</p>
<ul>
<li><strong>componentWillMount:</strong> 在组件<code>render()</code>前执行，用于根组件中的应用程序级别配置。应该避免在该方法中引入任何的副作用或订阅。</li>
<li><strong>componentDidMount:</strong> 首次渲染后调用，所有得 Ajax 请求、DOM 或状态更新、设置事件监听器都应该在此处发生。</li>
<li><strong>componentWillReceiveProps:</strong> 在组件接收到新属性前调用，若你需要更新状态响应属性改变（例如，重置它），你可能需对比<code>this.props</code>和<code>nextProps</code>并在该方法中使用<code>this.setState()</code>处理状态改变。</li>
<li><strong>shouldComponentUpdate:</strong> 确定组件是否应该更新。 默认情况下，它返回<code>true</code>。 如果你确定在更新状态或属性后不需要渲染组件，则可以返回<code>false</code>值。 它是一个提高性能的好地方，因为它允许你在组件接收新属性时阻止重新渲染。</li>
<li><strong>componentWillUpdate:</strong> 当<code>shouldComponentUpdate</code>返回<code>true</code>后重新渲染组件之前执行，注意你不能在这调用<code>this.setState()</code></li>
<li><strong>componentDidUpdate:</strong> 它主要用于更新 DOM 以响应 prop 或 state 更改。 如果<code>shouldComponentUpdate()</code>返回<code>false</code>，则不会触发。</li>
<li><strong>componentWillUnmount:</strong> 当一个组件被从 DOM 中移除时，该方法被调用，取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。</li>
</ul>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是高阶组件（HOC）"><a href="#什么是高阶组件（HOC）" class="headerlink" title="什么是高阶组件（HOC）?"></a>什么是高阶组件（HOC）?</h3><p><em>高阶组件</em>(<em>HOC</em>) 就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，它只是一种模式，这种模式是由<code>react</code>自身的组合性质必然产生的。</p>
<p>我们将它们称为<strong>纯组件</strong>，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> EnhancedComponent = higherOrderComponent(WrappedComponent)</span><br></pre></td></tr></table></figure>
<p>HOC 有很多用例：</p>
<ol>
<li>代码复用，逻辑抽象化</li>
<li>渲染劫持</li>
<li>抽象化和操作状态（<code>state</code>）</li>
<li>操作属性（<code>props</code>）</li>
</ol>
<blockquote>
<p>译注：更详细用法请参考<a href="https://react.docschina.org/docs/higher-order-components.html" target="_blank" rel="noopener">高阶组件的使用</a></p>
</blockquote>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何为高阶组件创建属性代理"><a href="#如何为高阶组件创建属性代理" class="headerlink" title="如何为高阶组件创建属性代理?"></a>如何为高阶组件创建属性代理?</h3><p>你可以使用<em>属性代理</em>模式向输入组件增加或编辑属性（props）：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">HOC</span>(<span class="params">WrappedComponent</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="class"><span class="keyword">class</span> <span class="title">Test</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    render() &#123;</span><br><span class="line">      <span class="keyword">const</span> newProps = &#123;</span><br><span class="line">        title: <span class="string">'New Header'</span>,</span><br><span class="line">        footer: <span class="literal">false</span>,</span><br><span class="line">        showFeatureX: <span class="literal">false</span>,</span><br><span class="line">        showFeatureY: <span class="literal">true</span></span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">WrappedComponent</span> &#123;<span class="attr">...this.props</span>&#125; &#123;<span class="attr">...newProps</span>&#125; /&gt;</span></span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是上下文（Context）"><a href="#什么是上下文（Context）" class="headerlink" title="什么是上下文（Context）?"></a>什么是上下文（Context）?</h3><p><em>Context</em> 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递<code>props</code>。比如，需要在应用中许多组件需要访问登录用户信息、地区偏好、UI主题等。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个 theme Context,  默认 theme 的值为 light</span></span><br><span class="line"><span class="keyword">const</span> ThemeContext = React.createContext(<span class="string">'light'</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ThemedButton</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// ThemedButton 组件从 context 接收 theme</span></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;ThemeContext.Consumer&gt;</span><br><span class="line">      &#123;theme =&gt; <span class="xml"><span class="tag">&lt;<span class="name">Button</span> &#123;<span class="attr">...props</span>&#125; <span class="attr">theme</span>=<span class="string">&#123;theme&#125;</span> /&gt;</span>&#125;</span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">ThemeContext.Consumer</span>&gt;</span></span></span><br><span class="line"><span class="xml">  );</span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">// 中间组件</span></span><br><span class="line"><span class="xml">function Toolbar(props) &#123;</span></span><br><span class="line"><span class="xml">  return (</span></span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;ThemedButton /&gt;</span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">  );</span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">class App extends React.Component &#123;</span></span><br><span class="line"><span class="xml">  render() &#123;</span></span><br><span class="line"><span class="xml">    return (</span></span><br><span class="line">      &lt;ThemeContext.Provider value="dark"&gt;</span><br><span class="line">        &lt;Toolbar /&gt;</span><br><span class="line">      &lt;/ThemeContext.Provider&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="children-属性是什么"><a href="#children-属性是什么" class="headerlink" title="children 属性是什么?"></a>children 属性是什么?</h3><p><em>Children</em> 是一个属性（<code>this.props.chldren</code>），它允许你将组件作为数据传递给其他组件，就像你使用的任何其他组件一样。在组件的开始和结束标记之间放置的组件树将作为<code>children</code>属性传递给该组件。</p>
<p>React API 中有许多方法中提供了这个不透明数据结构的方法，包括：<code>React.Children.map</code>、<code>React.Children.forEach</code>、<code>React.Children.count</code>、<code>React.Children.only</code>、<code>React.Children.toArray</code>。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MyDiv = React.createClass(&#123;</span><br><span class="line">  render: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;this.props.children&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">  &lt;MyDiv&gt;</span><br><span class="line">    &lt;span&gt;&#123;<span class="string">'Hello'</span>&#125;&lt;<span class="regexp">/span&gt;</span></span><br><span class="line"><span class="regexp">    &lt;span&gt;&#123;'World'&#125;&lt;/</span>span&gt;</span><br><span class="line">  &lt;<span class="regexp">/MyDiv&gt;,</span></span><br><span class="line"><span class="regexp">  node</span></span><br><span class="line"><span class="regexp">)</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="怎样在-React-中写注释"><a href="#怎样在-React-中写注释" class="headerlink" title="怎样在 React 中写注释?"></a>怎样在 React 中写注释?</h3><p>React/JSX 中的注释类似于 JavaScript 的多行注释，但是是用大括号括起来。</p>
<p><strong>单行注释：</strong></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">  &#123;<span class="comment">/* 单行注释（在原生 JavaScript 中，单行注释用双斜杠（//）表示） */</span>&#125;</span><br><span class="line">  &#123;<span class="string">`Welcome <span class="subst">$&#123;user&#125;</span>, let's play React`</span>&#125;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>多行注释：</strong></p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">  &#123;<span class="comment">/* 多行注释超过</span></span><br><span class="line"><span class="comment">   一行 */</span>&#125;</span><br><span class="line">  &#123;<span class="string">`Welcome <span class="subst">$&#123;user&#125;</span>, let's play React`</span>&#125;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="构造函数使用带-props-参数的目的是什么"><a href="#构造函数使用带-props-参数的目的是什么" class="headerlink" title="构造函数使用带 props 参数的目的是什么?"></a>构造函数使用带 props 参数的目的是什么?</h3><p>在调用<code>super()</code>方法之前，子类构造函数不能使用<code>this</code>引用。这同样适用于ES6子类。将<code>props</code>参数传递给<code>super()</code>的主要原因是为了在子构造函数中访问<code>this.props</code>。</p>
<p><strong>带 props 参数:</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.props) <span class="comment">// prints &#123; name: 'John', age: 42 &#125;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>不带 props 参数:</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>()</span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.props) <span class="comment">// prints undefined</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// but props parameter is still available</span></span><br><span class="line">    <span class="built_in">console</span>.log(props) <span class="comment">// prints &#123; name: 'John', age: 42 &#125;</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="comment">// no difference outside constructor</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.props) <span class="comment">// prints &#123; name: 'John', age: 42 &#125;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面的代码片段显示<code>this.props</code>仅在构造函数中有所不同。 它在构造函数之外是相同的。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是调解"><a href="#什么是调解" class="headerlink" title="什么是调解?"></a>什么是调解?</h3><p>当组件的<code>props</code>或<code>state</code>发生更改时，React 通过将新返回的元素与先前呈现的元素进行比较来确定是否需要实际的 DOM 更新。当它们不相等时，React 将更新 DOM 。此过程称为<em>reconciliation</em>。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何使用动态属性名设置-state"><a href="#如何使用动态属性名设置-state" class="headerlink" title="如何使用动态属性名设置 state ?"></a>如何使用动态属性名设置 state ?</h3><p>如果你使用 ES6 或 Babel 转换器来转换你的 JSX 代码，那么你可以使用<em>计算属性名称</em>来完成此操作。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">handleInputChange(event) &#123;</span><br><span class="line">  <span class="keyword">this</span>.setState(&#123; [event.target.id]: event.target.value &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="每次组件渲染时调用函数的常见错误是什么"><a href="#每次组件渲染时调用函数的常见错误是什么" class="headerlink" title="每次组件渲染时调用函数的常见错误是什么?"></a>每次组件渲染时调用函数的常见错误是什么?</h3><p>你需要确保在将函数作为参数传递时未调用该函数。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="comment">// Wrong: handleClick is called instead of passed as a reference!</span></span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;this.handleClick()&#125;</span>&gt;</span>&#123;'Click Me'&#125;<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>相反地，传递函数本身应该没有括号：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="comment">// Correct: handleClick is passed as a reference!</span></span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;this.handleClick&#125;</span>&gt;</span>&#123;'Click Me'&#125;<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么有组件名称要首字母大写"><a href="#为什么有组件名称要首字母大写" class="headerlink" title="为什么有组件名称要首字母大写?"></a>为什么有组件名称要首字母大写?</h3><p>这是必要的，因为组件不是 DOM 元素，它们是构造函数。 此外，在 JSX 中，小写标记名称是指 HTML 元素，而不是组件。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么-React-使用-className-而不是-class-属性"><a href="#为什么-React-使用-className-而不是-class-属性" class="headerlink" title="为什么 React 使用 className 而不是 class 属性?"></a>为什么 React 使用 <code>className</code> 而不是 <code>class</code> 属性?</h3><p><code>class</code> 是 JavaScript 中的关键字，而 JSX 是 JavaScript 的扩展。这就是为什么 React 使用 <code>className</code> 而不是 <code>class</code> 的主要原因。传递一个字符串作为 <code>className</code> 属性。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">className</span>=<span class="string">&#123;</span>'<span class="attr">menu</span> <span class="attr">navigation-menu</span>'&#125;&gt;</span>&#123;'Menu'&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<pre><code>在实际项目中，我们经常使用[classnames](https://github.com/JedWatson/classnames)来方便我们操作`className`。

**[⬆ 返回顶部](#目录)**
</code></pre><ol start="46">
<li><h3 id="什么是-Fragments"><a href="#什么是-Fragments" class="headerlink" title="什么是 Fragments ?"></a>什么是 Fragments ?</h3><p>它是 React 中的常见模式，用于组件返回多个元素。<em>Fragments</em> 可以让你聚合一个子元素列表，而无需向 DOM 添加额外节点。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;React.Fragment&gt;</span><br><span class="line">      &lt;ChildA /&gt;</span><br><span class="line">      &lt;ChildB /&gt;</span><br><span class="line">      &lt;ChildC /&gt;</span><br><span class="line">    &lt;<span class="regexp">/React.Fragment&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p>以下是简洁语法，但是在一些工具中还不支持：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;&gt;</span><br><span class="line">      &lt;ChildA /&gt;</span><br><span class="line">      &lt;ChildB /&gt;</span><br><span class="line">      &lt;ChildC /&gt;</span><br><span class="line">    &lt;<span class="regexp">/&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<pre><code>&gt; 译注：`React 16` 以前，`render` 函数的返回必须有一个根节点，否则报错。

**[⬆ 返回顶部](#目录)**
</code></pre><ol start="47">
<li><h3 id="为什么使用-Fragments-比使用容器-div-更好"><a href="#为什么使用-Fragments-比使用容器-div-更好" class="headerlink" title="为什么使用 Fragments 比使用容器 div 更好?"></a>为什么使用 Fragments 比使用容器 div 更好?</h3><ol>
<li>通过不创建额外的 DOM 节点，Fragments 更快并且使用更少的内存。这在非常大而深的节点树时很有好处。</li>
<li>一些 CSS 机制如<em>Flexbox</em>和<em>CSS Grid</em>具有特殊的父子关系，如果在中间添加 div 将使得很难保持所需的结构。</li>
<li>在 DOM 审查器中不会那么的杂乱。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中什么是-Portal"><a href="#在-React-中什么是-Portal" class="headerlink" title="在 React 中什么是 Portal ?"></a>在 React 中什么是 Portal ?</h3><p><em>Portal</em> 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ReactDOM.createPortal(child, container)</span><br></pre></td></tr></table></figure>
<p>第一个参数是任何可渲染的 React 子节点，例如元素，字符串或片段。第二个参数是 DOM 元素。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是无状态组件"><a href="#什么是无状态组件" class="headerlink" title="什么是无状态组件?"></a>什么是无状态组件?</h3><p>如果行为独立于其状态，则它可以是无状态组件。你可以使用函数或类来创建无状态组件。但除非你需要在组件中使用生命周期钩子，否则你应该选择函数组件。无状态组件有很多好处： 它们易于编写，理解和测试，速度更快，而且你可以完全避免使用<code>this</code>关键字。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是有状态组件"><a href="#什么是有状态组件" class="headerlink" title="什么是有状态组件?"></a>什么是有状态组件?</h3><p>如果组件的行为依赖于组件的<em>state</em>，那么它可以被称为有状态组件。这些<em>有状态组件</em>总是<em>类组件</em>，并且具有在<code>constructor</code>中初始化的状态。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line">    <span class="keyword">this</span>.state = &#123; <span class="attr">count</span>: <span class="number">0</span> &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中如何校验-props-属性"><a href="#在-React-中如何校验-props-属性" class="headerlink" title="在 React 中如何校验 props 属性?"></a>在 React 中如何校验 props 属性?</h3><p>当应用程序以开发模式运行的时，React 将会自动检查我们在组件上设置的所有属性，以确保它们具有正确的类型。如果类型不正确，React 将在控制台中生成警告信息。由于性能影响，它在生产模式下被禁用。使用 <code>isRequired</code> 定义必填属性。</p>
<p>预定义的 prop 类型：</p>
<ol>
<li><code>PropTypes.number</code></li>
<li><code>PropTypes.string</code></li>
<li><code>PropTypes.array</code></li>
<li><code>PropTypes.object</code></li>
<li><code>PropTypes.func</code></li>
<li><code>PropTypes.node</code></li>
<li><code>PropTypes.element</code></li>
<li><code>PropTypes.bool</code></li>
<li><code>PropTypes.symbol</code></li>
<li><code>PropTypes.any</code></li>
</ol>
<p>我们可以为 <code>User</code> 组件定义 <code>propTypes</code>，如下所示：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> propTypes = &#123;</span><br><span class="line">    name: PropTypes.string.isRequired,</span><br><span class="line">    age: PropTypes.number.isRequired</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;&gt;</span><br><span class="line">        &lt;h1&gt;&#123;<span class="string">`Welcome, <span class="subst">$&#123;<span class="keyword">this</span>.props.name&#125;</span>`</span>&#125;&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">        &lt;h2&gt;&#123;`Age, $&#123;this.props.age&#125;`&#125;&lt;/</span>h2&gt;</span><br><span class="line">      &lt;<span class="regexp">/&gt;</span></span><br><span class="line"><span class="regexp">    )</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong>注意:</strong> 在 React v15.5 中，<em>PropTypes</em> 从 <code>React.PropTypes</code> 被移动到 <code>prop-types</code> 库中。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-的优点是什么"><a href="#React-的优点是什么" class="headerlink" title="React 的优点是什么?"></a>React 的优点是什么?</h3><ol>
<li>使用 <em>Virtual DOM</em> 提高应用程序的性能。</li>
<li>JSX 使代码易于读写。</li>
<li>它支持在客户端和服务端渲染。</li>
<li>易于与框架（Angular，Backbone）集成，因为它只是一个视图库。</li>
<li>使用 Jest 等工具轻松编写单元与集成测试。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-的局限性是什么"><a href="#React-的局限性是什么" class="headerlink" title="React 的局限性是什么?"></a>React 的局限性是什么?</h3><ol>
<li>React 只是一个视图库，而不是一个完整的框架。</li>
<li>对于 Web 开发初学者来说，有一个学习曲线。</li>
<li>将 React 集成到传统的 MVC 框架中需要一些额外的配置。</li>
<li>代码复杂性随着内联模板和 JSX 的增加而增加。<br>&lt;&lt;&lt;&lt;&lt;&lt;&lt; HEAD</li>
<li><h1 id="如果有太多的小组件可能增加项目的庞大和复杂。"><a href="#如果有太多的小组件可能增加项目的庞大和复杂。" class="headerlink" title="如果有太多的小组件可能增加项目的庞大和复杂。"></a>如果有太多的小组件可能增加项目的庞大和复杂。</h1></li>
<li>太多较小的组件导致过度工程化或样板文件。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p>Update content and back to top items</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</li>
<li><h3 id="在-React-v16-中的错误边界是什么"><a href="#在-React-v16-中的错误边界是什么" class="headerlink" title="在 React v16 中的错误边界是什么?"></a>在 React v16 中的错误边界是什么?</h3><p>错误边界是在其子组件树中的任何位置捕获 JavaScript 错误、记录这些错误并显示回退 UI 而不是崩溃的组件树的组件。</p>
<p>如果一个类组件定义了一个名为 <code>componentDidCatch(error, info)</code> 或 <code>static getDerivedStateFromError()</code> 新的生命周期方法，则该类组件将成为错误边界：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">ErrorBoundary</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line">    <span class="keyword">this</span>.state = &#123; <span class="attr">hasError</span>: <span class="literal">false</span> &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  componentDidCatch(error, info) &#123;</span><br><span class="line">    <span class="comment">// You can also log the error to an error reporting service</span></span><br><span class="line">    logErrorToMyService(error, info)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> getDerivedStateFromError(error) &#123;</span><br><span class="line">     <span class="comment">// Update state so the next render will show the fallback UI.</span></span><br><span class="line">     <span class="keyword">return</span> &#123; <span class="attr">hasError</span>: <span class="literal">true</span> &#125;;</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.state.hasError) &#123;</span><br><span class="line">      <span class="comment">// You can render any custom fallback UI</span></span><br><span class="line">      <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;'Something went wrong.'&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.props.children</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>之后，将其作为常规组件使用：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ErrorBoundary&gt;</span><br><span class="line">  &lt;MyWidget /&gt;</span><br><span class="line">&lt;<span class="regexp">/ErrorBoundary&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-v15-中如何处理错误边界"><a href="#在-React-v15-中如何处理错误边界" class="headerlink" title="在 React v15 中如何处理错误边界?"></a>在 React v15 中如何处理错误边界?</h3><p>React v15 使用 <code>unstable_handleError</code> 方法为错误边界提供了非常基础的支持。已在 React v16 中，将其重命名为<code>componentDidCatch</code>。 </p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="静态类型检查推荐的方法是什么"><a href="#静态类型检查推荐的方法是什么" class="headerlink" title="静态类型检查推荐的方法是什么?"></a>静态类型检查推荐的方法是什么?</h3><p>通常，我们使用 PropTypes 库（在 React v15.5 之后 <code>React.PropTypes</code> 被移动到了 <code>prop-types</code> 包中），在 React 应用程序中执行类型检查。对于大型项目，建议使用静态类型检查器，比如 Flow 或 TypeScript，它们在编译时执行类型检查并提供 auto-completion 功能。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="react-dom-包的用途是什么"><a href="#react-dom-包的用途是什么" class="headerlink" title="react-dom 包的用途是什么?"></a><code>react-dom</code> 包的用途是什么?</h3><p><code>react-dom</code> 包提供了特定的 DOM 方法，可以在应用程序的顶层使用。大多数的组件不需要使用此模块。该模块中提供的一些方法如下：</p>
<ol>
<li><code>render()</code></li>
<li><code>hydrate()</code></li>
<li><code>unmountComponentAtNode()</code></li>
<li><code>findDOMNode()</code></li>
<li><code>createPortal()</code></li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="react-dom-中-render-方法的目的是什么"><a href="#react-dom-中-render-方法的目的是什么" class="headerlink" title="react-dom 中 render 方法的目的是什么?"></a><code>react-dom</code> 中 render 方法的目的是什么?</h3><p>此方法用于将 React 元素渲染到所提供容器中的 DOM 结构中，并返回对组件的引用。如果 React 元素之前已被渲染到容器中，它将对其执行更新，并且只在需要时改变 DOM 以反映最新的更改。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ReactDOM.render(element, container[, callback])</span><br></pre></td></tr></table></figure>
<p>如果提供了可选的回调函数，该函数将在组件被渲染或更新后执行。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="ReactDOMServer-是什么"><a href="#ReactDOMServer-是什么" class="headerlink" title="ReactDOMServer 是什么?"></a>ReactDOMServer 是什么?</h3><p><code>ReactDOMServer</code> 对象使你能够将组件渲染为静态标记（通常用于 Node 服务器中），此对象主要用于服务端渲染（SSR）。以下方法可用于服务器和浏览器环境：</p>
<ol>
<li><code>renderToString()</code></li>
<li><code>renderToStaticMarkup()</code></li>
</ol>
<p>例如，你通常运行基于 Node 的 Web 服务器，如 Express，Hapi 或 Koa，然后你调用 <code>renderToString</code> 将根组件渲染为字符串，然后作为响应进行发送。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// using Express</span></span><br><span class="line"><span class="keyword">import</span> &#123; renderToString &#125; <span class="keyword">from</span> <span class="string">'react-dom/server'</span></span><br><span class="line"><span class="keyword">import</span> MyPage <span class="keyword">from</span> <span class="string">'./MyPage'</span></span><br><span class="line"></span><br><span class="line">app.get(<span class="string">'/'</span>, (req, res) =&gt; &#123;</span><br><span class="line">  res.write(<span class="string">'&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;My Page&lt;/title&gt;&lt;/head&gt;&lt;body&gt;'</span>)</span><br><span class="line">  res.write(<span class="string">'&lt;div id="content"&gt;'</span>)</span><br><span class="line">  res.write(renderToString(<span class="xml"><span class="tag">&lt;<span class="name">MyPage</span>/&gt;</span></span>))</span><br><span class="line">  res.write(<span class="string">'&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;'</span>)</span><br><span class="line">  res.end()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中如何使用-innerHTML"><a href="#在-React-中如何使用-innerHTML" class="headerlink" title="在 React 中如何使用 innerHTML?"></a>在 React 中如何使用 innerHTML?</h3><p><code>dangerouslySetInnerHTML</code> 属性是 React 用来替代在浏览器 DOM 中使用 <code>innerHTML</code>。与 <code>innerHTML</code> 一样，考虑到跨站脚本攻击（XSS），使用此属性也是有风险的。使用时，你只需传递以 <code>__html</code> 作为键，而 HTML 文本作为对应值的对象。</p>
<p>在本示例中 MyComponent 组件使用 <code>dangerouslySetInnerHTML</code> 属性来设置 HTML 标记：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createMarkup</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">__html</span>: <span class="string">'First &amp;middot; Second'</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyComponent</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">dangerouslySetInnerHTML</span>=<span class="string">&#123;createMarkup()&#125;</span> /&gt;</span></span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-中使用样式"><a href="#如何在-React-中使用样式" class="headerlink" title="如何在 React 中使用样式?"></a>如何在 React 中使用样式?</h3><p><code>style</code> 属性接受含有 camelCased（驼峰）属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 样式中的 JavaScript 属性一致，效率更高，并且可以防止 XSS 安全漏洞。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> divStyle = &#123;</span><br><span class="line">  color: <span class="string">'blue'</span>,</span><br><span class="line">  backgroundImage: <span class="string">'url('</span> + imgUrl + <span class="string">')'</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">HelloWorldComponent</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&#123;divStyle&#125;</span>&gt;</span>Hello World!<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>为了与在 JavaScript 中访问 DOM 节点上的属性保持一致，样式键采用了 camelcased（例如<code>node.style.backgroundImage</code>）。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<ol start="62">
<li><h3 id="在-React-中事件有何不同"><a href="#在-React-中事件有何不同" class="headerlink" title="在 React 中事件有何不同?"></a>在 React 中事件有何不同?</h3><p>处理 React 元素中的事件有一些语法差异：</p>
<ol>
<li>React 事件处理程序是采用驼峰而不是小写来命名的。 </li>
<li>使用 JSX，你将传递一个函数作为事件处理程序，而不是字符串。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如果在构造函数中使用-setState-会发生什么"><a href="#如果在构造函数中使用-setState-会发生什么" class="headerlink" title="如果在构造函数中使用 setState() 会发生什么?"></a>如果在构造函数中使用 <code>setState()</code> 会发生什么?</h3><p>当你使用 <code>setState()</code> 时，除了设置状态对象之外，React 还会重新渲染组件及其所有的子组件。你会得到这样的错误：<em>Can only update a mounted or mounting component.</em>。因此我们需要在构造函数中使用 <code>this.state</code> 初始化状态。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="索引作为键的影响是什么"><a href="#索引作为键的影响是什么" class="headerlink" title="索引作为键的影响是什么?"></a>索引作为键的影响是什么?</h3><p>Keys 应该是稳定的，可预测的和唯一的，这样 React 就能够跟踪元素。</p>
<p>在下面的代码片段中，每个元素的键将基于列表项的顺序，而不是绑定到即将展示的数据上。这将限制 React 能够实现的优化。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;todos.map(<span class="function">(<span class="params">todo, index</span>) =&gt;</span></span><br><span class="line">  &lt;Todo</span><br><span class="line">    &#123;...todo&#125;</span><br><span class="line">    key=&#123;index&#125;</span><br><span class="line">  /&gt;</span><br><span class="line">)&#125;</span><br></pre></td></tr></table></figure>
<p>假设 <code>todo.id</code> 对此列表是唯一且稳定的，如果将此数据作为唯一键，那么 React 将能够对元素进行重新排序，而无需重新创建它们。 </p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;todos.map(<span class="function">(<span class="params">todo</span>) =&gt;</span></span><br><span class="line">  &lt;Todo &#123;...todo&#125;</span><br><span class="line">    key=&#123;todo.id&#125; /&gt;</span><br><span class="line">)&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-componentWillMount-方法中使用-setState-好吗"><a href="#在-componentWillMount-方法中使用-setState-好吗" class="headerlink" title="在 componentWillMount() 方法中使用 setState() 好吗?"></a>在 <code>componentWillMount()</code> 方法中使用 <code>setState()</code> 好吗?</h3><p>建议避免在 <code>componentWillMount()</code> 生命周期方法中执行异步初始化。在 mounting 发生之前会立即调用 <code>componentWillMount()</code>，且它在 <code>render()</code> 之前被调用，因此在此方法中更新状态将不会触发重新渲染。应避免在此方法中引入任何副作用或订阅操作。我们需要确保对组件初始化的异步调用发生在 <code>componentDidMount()</code> 中，而不是在 <code>componentWillMount()</code> 中。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">componentDidMount() &#123;</span><br><span class="line">  axios.get(<span class="string">`api/todos`</span>)</span><br><span class="line">    .then(<span class="function">(<span class="params">result</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">        messages: [...result.data]</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<pre><code>**[⬆ 返回顶部](#目录)**
</code></pre><ol start="66">
<li><h3 id="如果在初始状态中使用-props-属性会发生什么"><a href="#如果在初始状态中使用-props-属性会发生什么" class="headerlink" title="如果在初始状态中使用 props 属性会发生什么?"></a>如果在初始状态中使用 props 属性会发生什么?</h3><p>如果在不刷新组件的情况下更改组件上的属性，则不会显示新的属性值，因为构造函数函数永远不会更新组件的当前状态。只有在首次创建组件时才会用 props 属性初始化状态。</p>
<p>以下组件将不显示更新的输入值：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.state = &#123;</span><br><span class="line">      records: [],</span><br><span class="line">      inputValue: <span class="keyword">this</span>.props.inputValue</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;this.state.inputValue&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在 render 方法使用使用 props 将会显示更新的值：</p>
</li>
</ol>
<pre><code><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.state = &#123;</span><br><span class="line">      record: []</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;this.props.inputValue&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

**[⬆ 返回顶部](#目录)**
</code></pre><ol start="67">
<li><h3 id="如何有条件地渲染组件"><a href="#如何有条件地渲染组件" class="headerlink" title="如何有条件地渲染组件?"></a>如何有条件地渲染组件?</h3><p>在某些情况下，你希望根据某些状态渲染不同的组件。 JSX 不会渲染 <code>false</code> 或 <code>undefined</code>，因此你可以使用 <code>&amp;&amp;</code> 运算符，在某个条件为 true 时，渲染组件中指定的内容。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MyComponent = <span class="function">(<span class="params">&#123; name, address &#125;</span>) =&gt;</span> (</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h2&gt;&#123;name&#125;&lt;<span class="regexp">/h2&gt;</span></span><br><span class="line"><span class="regexp">    &#123;address &amp;&amp;</span></span><br><span class="line"><span class="regexp">      &lt;p&gt;&#123;address&#125;&lt;/</span>p&gt;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">)</span></span><br></pre></td></tr></table></figure>
<p>如果你需要一个 <code>if-else</code> 条件，那么使用三元运算符：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MyComponent = <span class="function">(<span class="params">&#123; name, address &#125;</span>) =&gt;</span> (</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h2&gt;&#123;name&#125;&lt;<span class="regexp">/h2&gt;</span></span><br><span class="line"><span class="regexp">    &#123;address</span></span><br><span class="line"><span class="regexp">      ? &lt;p&gt;&#123;address&#125;&lt;/</span>p&gt;</span><br><span class="line">      : <span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;'Address is not available'&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">    &#125;</span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">)</span></span><br></pre></td></tr></table></figure>
<p>阅读资源：</p>
<ol>
<li><a href="https://juejin.im/post/5b285c0d5188257494641d0b" target="_blank" rel="noopener">掘金 - 精读《React 八种条件渲染》</a></li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么在-DOM-元素上展开-props-需要小心"><a href="#为什么在-DOM-元素上展开-props-需要小心" class="headerlink" title="为什么在 DOM 元素上展开 props 需要小心?"></a>为什么在 DOM 元素上展开 props 需要小心?</h3><p>当我们展开属性时，我们会遇到添加未知 HTML 属性的风险，这是一种不好的做法。相反，我们可以使用属性解构和<code>...rest</code> 运算符，因此它只添加所需的 props 属性。例如，</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> ComponentA = <span class="function"><span class="params">()</span> =&gt;</span></span><br><span class="line">  &lt;ComponentB isDisplay=&#123;<span class="literal">true</span>&#125; className=&#123;<span class="string">'componentStyle'</span>&#125; /&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> ComponentB = <span class="function">(<span class="params">&#123; isDisplay, ...domProps &#125;</span>) =&gt;</span></span><br><span class="line">  &lt;div &#123;...domProps&#125;&gt;&#123;<span class="string">'ComponentB'</span>&#125;&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中如何使用装饰器"><a href="#在-React-中如何使用装饰器" class="headerlink" title="在 React 中如何使用装饰器?"></a>在 React 中如何使用装饰器?</h3><p>你可以装饰你的类组件，这与将组件传递到函数中是一样的。 装饰器是修改组件功能灵活且易读的方式。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">@setTitle(<span class="string">'Profile'</span>)</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Profile</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="comment">//....</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  title is a string that will be set as a document title</span></span><br><span class="line"><span class="comment">  WrappedComponent is what our decorator will receive when</span></span><br><span class="line"><span class="comment">  put directly above a component class as seen in the example above</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">const</span> setTitle = <span class="function">(<span class="params">title</span>) =&gt;</span> (WrappedComponent) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="class"><span class="keyword">class</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">    componentDidMount() &#123;</span><br><span class="line">      <span class="built_in">document</span>.title = title</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    render() &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">WrappedComponent</span> &#123;<span class="attr">...this.props</span>&#125; /&gt;</span></span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何-memoize（记忆）组件"><a href="#如何-memoize（记忆）组件" class="headerlink" title="如何 memoize（记忆）组件?"></a>如何 memoize（记忆）组件?</h3><p>有可用于函数组件的 memoize 库。例如 <code>moize</code> 库可以将组件存储在另一个组件中。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> moize <span class="keyword">from</span> <span class="string">'moize'</span></span><br><span class="line"><span class="keyword">import</span> Component <span class="keyword">from</span> <span class="string">'./components/Component'</span> <span class="comment">// this module exports a non-memoized component</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> MemoizedFoo = moize.react(Component)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Consumer = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &#123;<span class="string">'I will memoize the following entry:'</span>&#125;</span><br><span class="line">    &lt;MemoizedFoo/&gt;</span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何实现-Server-Side-Rendering-或-SSR"><a href="#如何实现-Server-Side-Rendering-或-SSR" class="headerlink" title="如何实现 Server Side Rendering 或 SSR?"></a>如何实现 Server Side Rendering 或 SSR?</h3><p>React 已经配备了用于处理 Node 服务器上页面渲染的功能。你可以使用特殊版本的 DOM 渲染器，它遵循与客户端相同的模式。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> ReactDOMServer <span class="keyword">from</span> <span class="string">'react-dom/server'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App'</span></span><br><span class="line"></span><br><span class="line">ReactDOMServer.renderToString(<span class="xml"><span class="tag">&lt;<span class="name">App</span> /&gt;</span>)</span></span><br></pre></td></tr></table></figure>
<p>此方法将以字符串形式输出常规 HTML，然后将其作为服务器响应的一部分放在页面正文中。在客户端，React 检测预渲染的内容并无缝地衔接。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-中启用生产模式"><a href="#如何在-React-中启用生产模式" class="headerlink" title="如何在 React 中启用生产模式?"></a>如何在 React 中启用生产模式?</h3><p>你应该使用 Webpack 的 <code>DefinePlugin</code> 方法将 <code>NODE_ENV</code> 设置为 <code>production</code>，通过它你可以去除 propType 验证和额外警告等内容。除此之外，如果你压缩代码，如使用 Uglify 的死代码消除，以去掉用于开发的代码和注释，它将大大减少包的大小。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-CRA-及其好处"><a href="#什么是-CRA-及其好处" class="headerlink" title="什么是 CRA 及其好处?"></a>什么是 CRA 及其好处?</h3><p><code>create-react-app</code> CLI 工具允许你无需配置步骤，快速创建和运行 React 应用。</p>
<p>让我们使用 <em>CRA</em> 来创建 Todo 应用：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> Installation</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install -g create-react-app</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> Create new project</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> create-react-app todo-app</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> todo-app</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> Build, <span class="built_in">test</span> and run</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm run build</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm run <span class="built_in">test</span></span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm start</span></span><br></pre></td></tr></table></figure>
<p>它包含了构建 React 应用程序所需的一切：</p>
<ol>
<li>React, JSX, ES6, 和 Flow 语法支持。</li>
<li>ES6 之外的语言附加功能，比如对象扩展运算符。</li>
<li>Autoprefixed CSS，因此你不在需要 -webkit- 或其他前缀。</li>
<li>一个快速的交互式单元测试运行程序，内置了对覆盖率报告的支持。</li>
<li>一个实时开发服务器，用于警告常见错误。</li>
<li>一个构建脚本，用于打包用于生产中包含 hashes 和 sourcemaps 的 JS、CSS 和 Images 文件。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-mounting-阶段生命周期方法的执行顺序是什么"><a href="#在-mounting-阶段生命周期方法的执行顺序是什么" class="headerlink" title="在 mounting 阶段生命周期方法的执行顺序是什么?"></a>在 mounting 阶段生命周期方法的执行顺序是什么?</h3><p>在创建组件的实例并将其插入到 DOM 中时，将按以下顺序调用生命周期方法。</p>
<ol>
<li><code>constructor()</code></li>
<li><code>static getDerivedStateFromProps()</code></li>
<li><code>render()</code></li>
<li><code>componentDidMount()</code></li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-v16-中，哪些生命周期方法将被弃用"><a href="#在-React-v16-中，哪些生命周期方法将被弃用" class="headerlink" title="在 React v16 中，哪些生命周期方法将被弃用?"></a>在 React v16 中，哪些生命周期方法将被弃用?</h3><p>以下生命周期方法将成为不安全的编码实践，并且在异步渲染方面会更有问题。</p>
<ol>
<li><code>componentWillMount()</code></li>
<li><code>componentWillReceiveProps()</code></li>
<li><code>componentWillUpdate()</code></li>
</ol>
<p>从 React v16.3 开始，这些方法使用 <code>UNSAFE_</code> 前缀作为别名，未加前缀的版本将在 React v17 中被移除。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="生命周期方法-getDerivedStateFromProps-的目的是什么"><a href="#生命周期方法-getDerivedStateFromProps-的目的是什么" class="headerlink" title="生命周期方法 getDerivedStateFromProps() 的目的是什么?"></a>生命周期方法 <code>getDerivedStateFromProps()</code> 的目的是什么?</h3><p>新的静态 <code>getDerivedStateFromProps()</code> 生命周期方法在实例化组件之后以及重新渲染组件之前调用。它可以返回一个对象用于更新状态，或者返回 <code>null</code> 指示新的属性不需要任何状态更新。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> getDerivedStateFromProps(props, state) &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>此生命周期方法与 <code>componentDidUpdate()</code> 一起涵盖了 <code>componentWillReceiveProps()</code> 的所有用例。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="生命周期方法-getSnapshotBeforeUpdate-的目的是什么"><a href="#生命周期方法-getSnapshotBeforeUpdate-的目的是什么" class="headerlink" title="生命周期方法 getSnapshotBeforeUpdate() 的目的是什么?"></a>生命周期方法 <code>getSnapshotBeforeUpdate()</code> 的目的是什么?</h3><p>新的 <code>getSnapshotBeforeUpdate()</code> 生命周期方法在 DOM 更新之前被调用。此方法的返回值将作为第三个参数传递给<code>componentDidUpdate()</code>。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  getSnapshotBeforeUpdate(prevProps, prevState) &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>此生命周期方法与 <code>componentDidUpdate()</code> 一起涵盖了 <code>componentWillUpdate()</code> 的所有用例。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="createElement-和-cloneElement-方法有什么区别"><a href="#createElement-和-cloneElement-方法有什么区别" class="headerlink" title="createElement() 和 cloneElement() 方法有什么区别?"></a>createElement() 和 cloneElement() 方法有什么区别?</h3><p>JSX 元素将被转换为 <code>React.createElement()</code> 函数来创建 React 元素，这些对象将用于表示 UI 对象。而 <code>cloneElement</code> 用于克隆元素并传递新的属性。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="推荐的组件命名方法是什么"><a href="#推荐的组件命名方法是什么" class="headerlink" title="推荐的组件命名方法是什么?"></a>推荐的组件命名方法是什么?</h3><p>建议通过引用命名组件，而不是使用 <code>displayName</code>。</p>
<p>使用 <code>displayName</code> 命名组件:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> React.createClass(&#123;</span><br><span class="line">  displayName: <span class="string">'TodoApp'</span>,</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>推荐的方式：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">TodoApp</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在组件类中方法的推荐顺序是什么"><a href="#在组件类中方法的推荐顺序是什么" class="headerlink" title="在组件类中方法的推荐顺序是什么?"></a>在组件类中方法的推荐顺序是什么?</h3><p>从 <em>mounting</em> 到 <em>render stage</em> 阶段推荐的方法顺序：</p>
<ol>
<li><code>static</code> 方法</li>
<li><code>constructor()</code></li>
<li><code>getChildContext()</code></li>
<li><code>componentWillMount()</code></li>
<li><code>componentDidMount()</code></li>
<li><code>componentWillReceiveProps()</code></li>
<li><code>shouldComponentUpdate()</code></li>
<li><code>componentWillUpdate()</code></li>
<li><code>componentDidUpdate()</code></li>
<li><code>componentWillUnmount()</code></li>
<li>点击处理程序或事件处理程序，如 <code>onClickSubmit()</code> 或 <code>onChangeDescription()</code></li>
<li>用于渲染的getter方法，如 <code>getSelectReason()</code> 或 <code>getFooterContent()</code></li>
<li>可选的渲染方法，如 <code>renderNavigation()</code> 或 <code>renderProfilePicture()</code></li>
<li><code>render()</code></li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-switching-组件"><a href="#什么是-switching-组件" class="headerlink" title="什么是 switching 组件?"></a>什么是 switching 组件?</h3><p>switching 组件是渲染多个组件之一的组件。我们需要使用对象将 prop 映射到组件中。</p>
<p>例如，以下的 switching 组件将基于 <code>page</code> 属性显示不同的页面：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> HomePage <span class="keyword">from</span> <span class="string">'./HomePage'</span></span><br><span class="line"><span class="keyword">import</span> AboutPage <span class="keyword">from</span> <span class="string">'./AboutPage'</span></span><br><span class="line"><span class="keyword">import</span> ServicesPage <span class="keyword">from</span> <span class="string">'./ServicesPage'</span></span><br><span class="line"><span class="keyword">import</span> ContactPage <span class="keyword">from</span> <span class="string">'./ContactPage'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> PAGES = &#123;</span><br><span class="line">  home: HomePage,</span><br><span class="line">  about: AboutPage,</span><br><span class="line">  services: ServicesPage,</span><br><span class="line">  contact: ContactPage</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Page = <span class="function">(<span class="params">props</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> Handler = PAGES[props.page] || ContactPage</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">Handler</span> &#123;<span class="attr">...props</span>&#125; /&gt;</span></span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">// The keys of the PAGES object can be used in the prop types to catch dev-time errors.</span></span><br><span class="line"><span class="xml">Page.propTypes = &#123;</span></span><br><span class="line"><span class="xml">  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么我们需要将函数传递给-setState-方法"><a href="#为什么我们需要将函数传递给-setState-方法" class="headerlink" title="为什么我们需要将函数传递给 setState() 方法?"></a>为什么我们需要将函数传递给 setState() 方法?</h3><p>这背后的原因是 <code>setState()</code> 是一个异步操作。出于性能原因，React 会对状态更改进行批处理，因此在调用 <code>setState()</code> 方法之后，状态可能不会立即更改。这意味着当你调用 <code>setState()</code> 方法时，你不应该依赖当前状态，因为你不能确定当前状态应该是什么。这个问题的解决方案是将一个函数传递给 <code>setState()</code>，该函数会以上一个状态作为参数。通过这样做，你可以避免由于 <code>setState()</code> 的异步性质而导致用户在访问时获取旧状态值的问题。</p>
<p>假设初始计数值为零。在连续三次增加操作之后，该值将只增加一个。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// assuming this.state.count === 0</span></span><br><span class="line"><span class="keyword">this</span>.setState(&#123; <span class="attr">count</span>: <span class="keyword">this</span>.state.count + <span class="number">1</span> &#125;)</span><br><span class="line"><span class="keyword">this</span>.setState(&#123; <span class="attr">count</span>: <span class="keyword">this</span>.state.count + <span class="number">1</span> &#125;)</span><br><span class="line"><span class="keyword">this</span>.setState(&#123; <span class="attr">count</span>: <span class="keyword">this</span>.state.count + <span class="number">1</span> &#125;)</span><br><span class="line"><span class="comment">// this.state.count === 1, not 3</span></span><br></pre></td></tr></table></figure>
<p>如果将函数传递给 <code>setState()</code>，则 count 将正确递增。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.setState(<span class="function">(<span class="params">prevState, props</span>) =&gt;</span> (&#123;</span><br><span class="line">  count: prevState.count + props.increment</span><br><span class="line">&#125;))</span><br><span class="line"><span class="comment">// this.state.count === 3 as expected</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中什么是严格模式"><a href="#在-React-中什么是严格模式" class="headerlink" title="在 React 中什么是严格模式?"></a>在 React 中什么是严格模式?</h3><p><code>React.StrictMode</code> 是一个有用的组件，用于突出显示应用程序中的潜在问题。就像 <code>&lt;Fragment&gt;</code>，<code>&lt;StrictMode&gt;</code> 一样，它们不会渲染任何额外的 DOM 元素。它为其后代激活额外的检查和警告。这些检查仅适用于开发模式。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ExampleApplication</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;Header /&gt;</span><br><span class="line">      &lt;React.StrictMode&gt;</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">          &lt;ComponentOne /&gt;</span><br><span class="line">          &lt;ComponentTwo /&gt;</span><br><span class="line">        &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>React.StrictMode&gt;</span><br><span class="line">      &lt;Footer /&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p>在上面的示例中，<em>strict mode</em> 检查仅应用于 <code>&lt;ComponentOne&gt;</code> 和 <code>&lt;ComponentTwo&gt;</code> 组件。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-Mixins-是什么"><a href="#React-Mixins-是什么" class="headerlink" title="React Mixins 是什么?"></a>React Mixins 是什么?</h3><p><em>Mixins</em> 是一种完全分离组件通用功能的方法。 Mixins 不应该被继续使用，可以用高阶组件或装饰器来替换。</p>
<p>最常用的 mixins 是 <code>PureRenderMixin</code>。当 props 和状态与之前的 props 和状态相等时，你可能在某些组件中使用它来防止不必要的重新渲染：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> PureRenderMixin = <span class="built_in">require</span>(<span class="string">'react-addons-pure-render-mixin'</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Button = React.createClass(&#123;</span><br><span class="line">  mixins: [PureRenderMixin],</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="string">`</span></span><br></pre></td></tr></table></figure>
<!-- TODO: mixins are deprecated -->
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么-isMounted-是一个反模式，而正确的解决方案是什么"><a href="#为什么-isMounted-是一个反模式，而正确的解决方案是什么" class="headerlink" title="为什么 isMounted() 是一个反模式，而正确的解决方案是什么?"></a>为什么 <code>isMounted()</code> 是一个反模式，而正确的解决方案是什么?</h3><p><code>isMounted()</code> 的主要场景是避免在组件卸载后调用 <code>setState()</code>，因为它会发出警告。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="keyword">this</span>.isMounted()) &#123;</span><br><span class="line">  <span class="keyword">this</span>.setState(&#123;...&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在调用 <code>setState()</code> 之前检查 <code>isMounted()</code> 会消除警告，但也会破坏警告的目的。使用 <code>isMounted()</code> 有一种代码味道，因为你要检查的唯一原因是你认为在卸载组件后可能持有引用。</p>
<p>最佳解决方案是找到在组件卸载后调用 <code>setState()</code> 的位置，并修复它们。这种情况最常发生在回调中，即组件正在等待某些数据并在数据到达之前卸载。理想情况下，在卸载之前，应在 <code>componentWillUnmount()</code> 中取消任何回调。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-中支持哪些指针事件"><a href="#React-中支持哪些指针事件" class="headerlink" title="React 中支持哪些指针事件?"></a>React 中支持哪些指针事件?</h3><p><em>Pointer Events</em> 提供了处理所有输入事件的统一方法。在过去，我们有一个鼠标和相应的事件监听器来处理它们，但现在我们有许多与鼠标无关的设备，比如带触摸屏的手机或笔。我们需要记住，这些事件只能在支持 <em>Pointer Events</em> 规范的浏览器中工作。</p>
<p>目前以下事件类型在 <em>React DOM</em> 中是可用的：</p>
<ol>
<li><code>onPointerDown</code></li>
<li><code>onPointerMove</code></li>
<li><code>onPointerUp</code></li>
<li><code>onPointerCancel</code></li>
<li><code>onGotPointerCapture</code></li>
<li><code>onLostPointerCaptur</code></li>
<li><code>onPointerEnter</code></li>
<li><code>onPointerLeave</code></li>
<li><code>onPointerOver</code></li>
<li><code>onPointerOut</code></li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么组件名称应该以大写字母开头"><a href="#为什么组件名称应该以大写字母开头" class="headerlink" title="为什么组件名称应该以大写字母开头?"></a>为什么组件名称应该以大写字母开头?</h3><p>如果使用 JSX 渲染组件，则该组件的名称必须以大写字母开头，否则 React 将会抛出无法识别标签的错误。这种约定是因为只有 HTML 元素和 SVG 标签可以以小写字母开头。</p>
<p>定义组件类的时候，你可以以小写字母开头，但在导入时应该使用大写字母。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">myComponent</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span> /&gt;</span></span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">export default myComponent</span></span><br></pre></td></tr></table></figure>
<p>当在另一个文件导入时，应该以大写字母开头：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> MyComponent <span class="keyword">from</span> <span class="string">'./MyComponent'</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-v16-中是否支持自定义-DOM-属性"><a href="#在-React-v16-中是否支持自定义-DOM-属性" class="headerlink" title="在 React v16 中是否支持自定义 DOM 属性?"></a>在 React v16 中是否支持自定义 DOM 属性?</h3><p>是的，在过去 React 会忽略未知的 DOM 属性。如果你编写的 JSX 属性 React 无法识别，那么 React 将跳过它。例如：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div mycustomattribute=&#123;<span class="string">'something'</span>&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p>在 React 15 中将在 DOM 中渲染一个空的 div：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p>在 React 16 中，任何未知的属性都将会在 DOM 显示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">mycustomattribute</span>=<span class="string">'something'</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p>这对于应用特定于浏览器的非标准属性，尝试新的 DOM APIs 与集成第三方库来说非常有用。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="constructor-和-getInitialState-有什么区别"><a href="#constructor-和-getInitialState-有什么区别" class="headerlink" title="constructor 和 getInitialState 有什么区别?"></a>constructor 和 getInitialState 有什么区别?</h3><p>当使用 ES6 类时，你应该在构造函数中初始化状态，而当你使用 <code>React.createClass()</code> 时，就需要使用 <code>getInitialState()</code> 方法。</p>
<p>使用 ES6 类:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line">    <span class="keyword">this</span>.state = &#123; <span class="comment">/* initial state */</span> &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>使用 <code>React.createClass()</code>:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MyComponent = React.createClass(&#123;</span><br><span class="line">  getInitialState() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123; <span class="comment">/* initial state */</span> &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 在 React v16 中 <code>React.createClass()</code> 已被弃用和删除，请改用普通的 JavaScript 类。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="是否可以在不调用-setState-方法的情况下，强制组件重新渲染"><a href="#是否可以在不调用-setState-方法的情况下，强制组件重新渲染" class="headerlink" title="是否可以在不调用 setState 方法的情况下，强制组件重新渲染?"></a>是否可以在不调用 setState 方法的情况下，强制组件重新渲染?</h3><p>默认情况下，当组件的状态或属性改变时，组件将重新渲染。如果你的 <code>render()</code> 方法依赖于其他数据，你可以通过调用 <code>forceUpdate()</code> 来告诉 React，当前组件需要重新渲染。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">component.forceUpdate(callback)</span><br></pre></td></tr></table></figure>
<p>建议避免使用 <code>forceUpdate()</code>，并且只在 <code>render()</code> 方法中读取 <code>this.props</code> 和 <code>this.state</code>。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在使用-ES6-类的-React-中-super-和-super-props-有什么区别"><a href="#在使用-ES6-类的-React-中-super-和-super-props-有什么区别" class="headerlink" title="在使用 ES6 类的 React 中 super() 和 super(props) 有什么区别?"></a>在使用 ES6 类的 React 中 <code>super()</code> 和 <code>super(props)</code> 有什么区别?</h3><p>当你想要在 <code>constructor()</code> 函数中访问 <code>this.props</code>，你需要将 props 传递给 <code>super()</code> 方法。</p>
<p>使用 <code>super(props)</code>:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.props) <span class="comment">// &#123; name: 'John', ... &#125;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>使用 <code>super()</code>:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>()</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.props) <span class="comment">// undefined</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在 <code>constructor()</code> 函数之外，访问 <code>this.props</code> 属性会显示相同的值。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-JSX-中如何进行循环"><a href="#在-JSX-中如何进行循环" class="headerlink" title="在 JSX 中如何进行循环?"></a>在 JSX 中如何进行循环?</h3><p>你只需使用带有 ES6 箭头函数语法的 <code>Array.prototype.map</code> 即可。例如，<code>items</code> 对象数组将会被映射成一个组件数组：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;tbody&gt;</span><br><span class="line">  &#123;items.map(<span class="function"><span class="params">item</span> =&gt;</span> &lt;SomeComponent key=&#123;item.id&#125; name=&#123;item.name&#125; /&gt;)&#125;</span><br><span class="line">&lt;<span class="regexp">/tbody&gt;</span></span><br></pre></td></tr></table></figure>
<p>你不能使用 <code>for</code> 循环进行迭代：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;tbody&gt;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; items.length; i++) &#123;</span><br><span class="line">    &lt;SomeComponent key=&#123;items[i].id&#125; name=&#123;items[i].name&#125; /&gt;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;<span class="regexp">/tbody&gt;</span></span><br></pre></td></tr></table></figure>
<p>这是因为 JSX 标签会被转换成函数调用，并且你不能在表达式中使用语句。但这可能会由于 <code>do</code> 表达式而改变，它们是第一阶段提案。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-attribute-引号中访问-props-属性"><a href="#如何在-attribute-引号中访问-props-属性" class="headerlink" title="如何在 attribute 引号中访问 props 属性?"></a>如何在 attribute 引号中访问 props 属性?</h3><p>React (或 JSX) 不支持属性值内的变量插值。下面的形式将不起作用：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;img className=<span class="string">'image'</span> src=<span class="string">'images/&#123;this.props.image&#125;'</span> /&gt;</span><br></pre></td></tr></table></figure>
<p>但你可以将 JS 表达式作为属性值放在大括号内。所以下面的表达式是有效的：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;img className=<span class="string">'image'</span> src=&#123;<span class="string">'images/'</span> + <span class="keyword">this</span>.props.image&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p>使用模板字符串也是可以的：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;img className=<span class="string">'image'</span> src=&#123;<span class="string">`images/<span class="subst">$&#123;<span class="keyword">this</span>.props.image&#125;</span>`</span>&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-React-proptype-数组"><a href="#什么是-React-proptype-数组" class="headerlink" title="什么是 React proptype 数组?"></a>什么是 React proptype 数组?</h3><p>如果你要规范具有特定对象格式的数组的属性，请使用 <code>React.PropTypes.shape()</code> 作为 <code>React.PropTypes.arrayOf()</code> 的参数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">ReactComponent.propTypes = &#123;</span><br><span class="line">  arrayWithShape: React.PropTypes.arrayOf(React.PropTypes.shape(&#123;</span><br><span class="line">    color: React.PropTypes.string.isRequired,</span><br><span class="line">    fontSize: React.PropTypes.number.isRequired</span><br><span class="line">  &#125;)).isRequired</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何有条件地应用样式类"><a href="#如何有条件地应用样式类" class="headerlink" title="如何有条件地应用样式类?"></a>如何有条件地应用样式类?</h3><p>你不应该在引号内使用大括号，因为它将被计算为字符串。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div className=<span class="string">"btn-panel &#123;this.props.visible ? 'show' : 'hidden'&#125;"</span>&gt;</span><br></pre></td></tr></table></figure>
<p>相反，你需要将大括号移到外部（不要忘记在类名之间添加空格）：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div className=&#123;<span class="string">'btn-panel '</span> + (<span class="keyword">this</span>.props.visible ? <span class="string">'show'</span> : <span class="string">'hidden'</span>)&#125;&gt;</span><br></pre></td></tr></table></figure>
<p>模板字符串也可以工作：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div className=&#123;<span class="string">`btn-panel <span class="subst">$&#123;<span class="keyword">this</span>.props.visible ? <span class="string">'show'</span> : <span class="string">'hidden'</span>&#125;</span>`</span>&#125;&gt;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-和-ReactDOM-之间有什么区别"><a href="#React-和-ReactDOM-之间有什么区别" class="headerlink" title="React 和 ReactDOM 之间有什么区别?"></a>React 和 ReactDOM 之间有什么区别?</h3><p><code>react</code> 包中包含 <code>React.createElement()</code>, <code>React.Component</code>, <code>React.Children</code>，以及与元素和组件类相关的其他帮助程序。你可以将这些视为构建组件所需的同构或通用帮助程序。<code>react-dom</code> 包中包含了 <code>ReactDOM.render()</code>，在 <code>react-dom/server</code> 包中有支持服务端渲染的 <code>ReactDOMServer.renderToString()</code> 和 <code>ReactDOMServer.renderToStaticMarkup()</code> 方法。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么-ReactDOM-从-React-分离出来"><a href="#为什么-ReactDOM-从-React-分离出来" class="headerlink" title="为什么 ReactDOM 从 React 分离出来?"></a>为什么 ReactDOM 从 React 分离出来?</h3><p>React 团队致力于将所有的与 DOM 相关的特性抽取到一个名为 ReactDOM 的独立库中。React v0.14 是第一个拆分后的版本。通过查看一些软件包，<code>react-native</code>，<code>react-art</code>，<code>react-canvas</code>，和 <code>react-three</code>，很明显，React 的优雅和本质与浏览器或 DOM 无关。为了构建更多 React 能应用的环境，React 团队计划将主要的 React 包拆分成两个：<code>react</code> 和 <code>react-dom</code>。这为编写可以在 React 和 React Native 的 Web 版本之间共享的组件铺平了道路。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何使用-React-label-元素"><a href="#如何使用-React-label-元素" class="headerlink" title="如何使用 React label 元素?"></a>如何使用 React label 元素?</h3><p>如果你尝试使用标准的 <code>for</code> 属性将 <code>&lt;label&gt;</code> 元素绑定到文本输入框，那么在控制台将会打印缺少 HTML 属性的警告消息。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;label <span class="keyword">for</span>=&#123;<span class="string">'user'</span>&#125;&gt;&#123;<span class="string">'User'</span>&#125;&lt;<span class="regexp">/label&gt;</span></span><br><span class="line"><span class="regexp">&lt;input type=&#123;'text'&#125; id=&#123;'user'&#125; /</span>&gt;</span><br></pre></td></tr></table></figure>
<p>因为 <code>for</code> 是 JavaScript 的保留字，请使用 <code>htmlFor</code> 来替代。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;label htmlFor=&#123;<span class="string">'user'</span>&#125;&gt;&#123;<span class="string">'User'</span>&#125;&lt;<span class="regexp">/label&gt;</span></span><br><span class="line"><span class="regexp">&lt;input type=&#123;'text'&#125; id=&#123;'user'&#125; /</span>&gt;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何合并多个内联的样式对象"><a href="#如何合并多个内联的样式对象" class="headerlink" title="如何合并多个内联的样式对象?"></a>如何合并多个内联的样式对象?</h3><p>在 React 中，你可以使用扩展运算符:</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button style=&#123;&#123;...styles.panel.button, ...styles.panel.submitButton&#125;&#125;&gt;&#123;<span class="string">'Submit'</span>&#125;&lt;<span class="regexp">/button&gt;</span></span><br></pre></td></tr></table></figure>
<p>如果你使用的是 React Native，则可以使用数组表示法：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button style=&#123;[styles.panel.button, styles.panel.submitButton]&#125;&gt;&#123;<span class="string">'Submit'</span>&#125;&lt;<span class="regexp">/button&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在调整浏览器大小时重新渲染视图"><a href="#如何在调整浏览器大小时重新渲染视图" class="headerlink" title="如何在调整浏览器大小时重新渲染视图?"></a>如何在调整浏览器大小时重新渲染视图?</h3><p>你可以在 <code>componentDidMount()</code> 中监听 <code>resize</code> 事件，然后更新尺寸（<code>width</code> 和 <code>height</code>）。你应该在 <code>componentWillUnmount()</code> 方法中移除监听。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">WindowDimensions</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  componentWillMount() &#123;</span><br><span class="line">    <span class="keyword">this</span>.updateDimensions()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  componentDidMount() &#123;</span><br><span class="line">    <span class="built_in">window</span>.addEventListener(<span class="string">'resize'</span>, <span class="keyword">this</span>.updateDimensions)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  componentWillUnmount() &#123;</span><br><span class="line">    <span class="built_in">window</span>.removeEventListener(<span class="string">'resize'</span>, <span class="keyword">this</span>.updateDimensions)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  updateDimensions() &#123;</span><br><span class="line">    <span class="keyword">this</span>.setState(&#123;<span class="attr">width</span>: $(<span class="built_in">window</span>).width(), <span class="attr">height</span>: $(<span class="built_in">window</span>).height()&#125;)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;this.state.width&#125; x &#123;this.state.height&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="setState-和-replaceState-方法之间有什么区别"><a href="#setState-和-replaceState-方法之间有什么区别" class="headerlink" title="setState() 和 replaceState() 方法之间有什么区别?"></a><code>setState()</code> 和 <code>replaceState()</code> 方法之间有什么区别?</h3><p>当你使用 <code>setState()</code> 时，当前和先前的状态将被合并。<code>replaceState()</code> 会抛出当前状态，并仅用你提供的内容替换它。通常使用 <code>setState()</code>，除非你出于某种原因确实需要删除所有以前的键。你还可以在 <code>setState()</code> 中将状态设置为 <code>false</code>/<code>null</code>，而不是使用 <code>replaceState()</code>。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何监听状态变化"><a href="#如何监听状态变化" class="headerlink" title="如何监听状态变化?"></a>如何监听状态变化?</h3><p>当状态更改时将调用以下生命周期方法。你可以将提供的状态和属性值与当前状态和属性值进行比较，以确定是否发生了有意义的改变。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">componentWillUpdate(object nextProps, object nextState)</span><br><span class="line">componentDidUpdate(object prevProps, object prevState)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<ol start="103">
<li><h3 id="在-React-状态中删除数组元素的推荐方法是什么"><a href="#在-React-状态中删除数组元素的推荐方法是什么" class="headerlink" title="在 React 状态中删除数组元素的推荐方法是什么?"></a>在 React 状态中删除数组元素的推荐方法是什么?</h3><p>更好的方法是使用 <code>Array.prototype.filter()</code> 方法。</p>
<p>例如，让我们创建用于更新状态的 <code>removeItem()</code> 方法。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">removeItem(index) &#123;</span><br><span class="line">  <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">    data: <span class="keyword">this</span>.state.data.filter(<span class="function">(<span class="params">item, i</span>) =&gt;</span> i !== index)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中是否可以不在页面上渲染-HTML-内容"><a href="#在-React-中是否可以不在页面上渲染-HTML-内容" class="headerlink" title="在 React 中是否可以不在页面上渲染 HTML 内容?"></a>在 React 中是否可以不在页面上渲染 HTML 内容?</h3><p>可以使用最新的版本 (&gt;=16.2)，以下是可能的选项：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">null</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> []</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">React.Fragment</span>&gt;</span><span class="tag">&lt;/<span class="name">React.Fragment</span>&gt;</span></span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;&gt;</span><span class="tag">&lt;/&gt;</span></span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p>返回 <code>undefined</code> 是无效的。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何用-React-漂亮地显示-JSON"><a href="#如何用-React-漂亮地显示-JSON" class="headerlink" title="如何用 React 漂亮地显示 JSON?"></a>如何用 React 漂亮地显示 JSON?</h3><p>我们可以使用 <code>&lt;pre&gt;</code> 标签，以便保留 <code>JSON.stringify()</code> 的格式：</p>
</li>
</ol>
<pre><code><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> data = &#123; <span class="attr">name</span>: <span class="string">'John'</span>, <span class="attr">age</span>: <span class="number">42</span> &#125;</span><br><span class="line">    </span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;pre&gt;</span><br><span class="line">        &#123;<span class="built_in">JSON</span>.stringify(data, <span class="literal">null</span>, <span class="number">2</span>)&#125;</span><br><span class="line">      &lt;<span class="regexp">/pre&gt;</span></span><br><span class="line"><span class="regexp">    )</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">    </span></span><br><span class="line"><span class="regexp">React.render(&lt;User /</span>&gt;, <span class="built_in">document</span>.getElementById(<span class="string">'container'</span>))</span><br></pre></td></tr></table></figure>

**[⬆ 返回顶部](#目录)**
</code></pre><ol start="106">
<li><h3 id="为什么你不能更新-React-中的-props"><a href="#为什么你不能更新-React-中的-props" class="headerlink" title="为什么你不能更新 React 中的 props?"></a>为什么你不能更新 React 中的 props?</h3><p>React 的哲学是 props 应该是 <em>immutable</em> 和 <em>top-down</em>。这意味着父级可以向子级发送任何属性值，但子级不能修改接收到的属性。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在页面加载时聚焦一个输入元素"><a href="#如何在页面加载时聚焦一个输入元素" class="headerlink" title="如何在页面加载时聚焦一个输入元素?"></a>如何在页面加载时聚焦一个输入元素?</h3><p>你可以为 <code>input</code> 元素创建一个 <code>ref</code>，然后在 <code>componentDidMount()</code> 方法中使用它：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</span><br><span class="line">  componentDidMount() &#123;</span><br><span class="line">    <span class="keyword">this</span>.nameInput.focus()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;input</span><br><span class="line">          defaultValue=&#123;<span class="string">'Won\'t focus'</span>&#125;</span><br><span class="line">        /&gt;</span><br><span class="line">        &lt;input</span><br><span class="line">          ref=&#123;(input) =&gt; <span class="keyword">this</span>.nameInput = input&#125;</span><br><span class="line">          defaultValue=&#123;<span class="string">'Will focus'</span>&#125;</span><br><span class="line">        /&gt;</span><br><span class="line">      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    )</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">ReactDOM.render(&lt;App /</span>&gt;, <span class="built_in">document</span>.getElementById(<span class="string">'app'</span>))</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="更新状态中的对象有哪些可能的方法"><a href="#更新状态中的对象有哪些可能的方法" class="headerlink" title="更新状态中的对象有哪些可能的方法?"></a>更新状态中的对象有哪些可能的方法?</h3><ol>
<li><p>用一个对象调用 <code>setState()</code> 来与状态合并：</p>
<ul>
<li><p>使用 <code>Object.assign()</code> 创建对象的副本：</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> user = <span class="built_in">Object</span>.assign(&#123;&#125;, <span class="keyword">this</span>.state.user, &#123; <span class="attr">age</span>: <span class="number">42</span> &#125;)</span><br><span class="line"><span class="keyword">this</span>.setState(&#123; user &#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>使用扩展运算符：</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> user = &#123; ...this.state.user, <span class="attr">age</span>: <span class="number">42</span> &#125;</span><br><span class="line"><span class="keyword">this</span>.setState(&#123; user &#125;)</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>使用一个函数调用 <code>setState()</code>：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.setState(<span class="function"><span class="params">prevState</span> =&gt;</span> (&#123;</span><br><span class="line">  user: &#123;</span><br><span class="line">    ...prevState.user,</span><br><span class="line">    age: <span class="number">42</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
</li>
<li><h3 id="为什么函数比对象更适合于-setState"><a href="#为什么函数比对象更适合于-setState" class="headerlink" title="为什么函数比对象更适合于 setState()?"></a>为什么函数比对象更适合于 <code>setState()</code>?</h3><p>出于性能考虑，React 可能将多个 <code>setState()</code> 调用合并成单个更新。这是因为我们可以异步更新 <code>this.props</code> 和 <code>this.state</code>，所以不应该依赖它们的值来计算下一个状态。</p>
<p>以下的 counter 示例将无法按预期更新：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Wrong</span></span><br><span class="line"><span class="keyword">this</span>.setState(&#123;</span><br><span class="line">  counter: <span class="keyword">this</span>.state.counter + <span class="keyword">this</span>.props.increment,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>首选方法是使用函数而不是对象调用 <code>setState()</code>。该函数将前一个状态作为第一个参数，当前时刻的 props 作为第二个参数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Correct</span></span><br><span class="line"><span class="keyword">this</span>.setState(<span class="function">(<span class="params">prevState, props</span>) =&gt;</span> (&#123;</span><br><span class="line">  counter: prevState.counter + props.increment</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="我们如何在浏览器中找到当前正在运行的-React-版本"><a href="#我们如何在浏览器中找到当前正在运行的-React-版本" class="headerlink" title="我们如何在浏览器中找到当前正在运行的 React 版本?"></a>我们如何在浏览器中找到当前正在运行的 React 版本?</h3><p>你可以使用 <code>React.version</code> 来获取版本：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> REACT_VERSION = React.version</span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">  &lt;div&gt;&#123;<span class="string">`React version: <span class="subst">$&#123;REACT_VERSION&#125;</span>`</span>&#125;&lt;<span class="regexp">/div&gt;,</span></span><br><span class="line"><span class="regexp">  document.getElementById('app')</span></span><br><span class="line"><span class="regexp">)</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-create-react-app-项目中导入-polyfills-的方法有哪些"><a href="#在-create-react-app-项目中导入-polyfills-的方法有哪些" class="headerlink" title="在 create-react-app 项目中导入 polyfills 的方法有哪些?"></a>在 <code>create-react-app</code> 项目中导入 polyfills 的方法有哪些?</h3><ol>
<li><p><strong>从 <code>core-js</code> 中手动导入:</strong></p>
<p> 创建一个名为 <code>polyfills.js</code> 文件，并在根目录下的 <code>index.js</code> 文件中导入它。运行 <code>npm install core-js</code> 或 <code>yarn add core-js</code> 并导入你所需的功能特性：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'core-js/fn/array/find'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'core-js/fn/array/includes'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'core-js/fn/number/is-nan'</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>使用 Polyfill 服务:</strong></p>
<p> 通过将以下内容添加到 <code>index.html</code> 中来获取自定义的特定于浏览器的 polyfill：</p>
 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">'https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes'</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p> 在上面的脚本中，我们必须显式地请求 <code>Array.prototype.includes</code> 特性，因为它没有被包含在默认的特性集中。</p>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-create-react-app-中使用-https-而不是-http"><a href="#如何在-create-react-app-中使用-https-而不是-http" class="headerlink" title="如何在 create-react-app 中使用 https 而不是 http?"></a>如何在 create-react-app 中使用 https 而不是 http?</h3><p>你只需要使用 <code>HTTPS=true</code> 配置。你可以编辑 <code>package.json</code> 中的 scripts 部分：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">"scripts": &#123;</span><br><span class="line">  "start": "set HTTPS=true &amp;&amp; react-scripts start"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>或直接运行 <code>set HTTPS=true &amp;&amp; npm start</code></p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何避免在-create-react-app-中使用相对路径导入"><a href="#如何避免在-create-react-app-中使用相对路径导入" class="headerlink" title="如何避免在 create-react-app 中使用相对路径导入?"></a>如何避免在 create-react-app 中使用相对路径导入?</h3><p>在项目的根目录中创建一个名为 <code>.env</code> 的文件，并写入导入路径：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">NODE_PATH=src/app</span><br></pre></td></tr></table></figure>
<p>然后重新启动开发服务器。现在，你应该能够在没有相对路径的情况下导入 <code>src/app</code> 内的任何内容。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何为-React-Router-添加-Google-Analytics"><a href="#如何为-React-Router-添加-Google-Analytics" class="headerlink" title="如何为 React Router 添加 Google Analytics?"></a>如何为 React Router 添加 Google Analytics?</h3><p>在 <code>history</code> 对象上添加一个监听器以记录每个页面的访问：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">history.listen(<span class="function"><span class="keyword">function</span> (<span class="params">location</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">window</span>.ga(<span class="string">'set'</span>, <span class="string">'page'</span>, location.pathname + location.search)</span><br><span class="line">  <span class="built_in">window</span>.ga(<span class="string">'send'</span>, <span class="string">'pageview'</span>, location.pathname + location.search)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何每秒更新一个组件"><a href="#如何每秒更新一个组件" class="headerlink" title="如何每秒更新一个组件?"></a>如何每秒更新一个组件?</h3><p>你需要使用 <code>setInterval()</code> 来触发更改，但也需要在组件卸载时清除计时器，以防止错误和内存泄漏。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">componentDidMount() &#123;</span><br><span class="line">  <span class="keyword">this</span>.interval = setInterval(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">this</span>.setState(&#123; <span class="attr">time</span>: <span class="built_in">Date</span>.now() &#125;), <span class="number">1000</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">componentWillUnmount() &#123;</span><br><span class="line">  clearInterval(<span class="keyword">this</span>.interval)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何将-vendor-prefixes-应用于-React-中的内联样式"><a href="#如何将-vendor-prefixes-应用于-React-中的内联样式" class="headerlink" title="如何将 vendor prefixes 应用于 React 中的内联样式?"></a>如何将 vendor prefixes 应用于 React 中的内联样式?</h3><p>React不会自动应用 <em>vendor prefixes</em>，你需要手动添加 <em>vendor prefixes</em>。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div style=&#123;&#123;</span><br><span class="line">  transform: <span class="string">'rotate(90deg)'</span>,</span><br><span class="line">  WebkitTransform: <span class="string">'rotate(90deg)'</span>, <span class="comment">// note the capital 'W' here</span></span><br><span class="line">  msTransform: <span class="string">'rotate(90deg)'</span> <span class="comment">// 'ms' is the only lowercase vendor prefix</span></span><br><span class="line">&#125;&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何使用-React-和-ES6-导入和导出组件"><a href="#如何使用-React-和-ES6-导入和导出组件" class="headerlink" title="如何使用 React 和 ES6 导入和导出组件?"></a>如何使用 React 和 ES6 导入和导出组件?</h3><p>导出组件时，你应该使用默认导出：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> User <span class="keyword">from</span> <span class="string">'user'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">MyProfile</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render()&#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;User type=<span class="string">"customer"</span>&gt;</span><br><span class="line">        <span class="comment">//...</span></span><br><span class="line">      &lt;<span class="regexp">/User&gt;</span></span><br><span class="line"><span class="regexp">    )</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p>使用 export 说明符，MyProfile 将成为成员并导出到此模块，此外在其他组件中你无需指定名称就可以导入相同的内容。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么-React-组件名称必须以大写字母开头"><a href="#为什么-React-组件名称必须以大写字母开头" class="headerlink" title="为什么 React 组件名称必须以大写字母开头?"></a>为什么 React 组件名称必须以大写字母开头?</h3><p>在 JSX 中，小写标签被认为是 HTML 标签。但是，含有 <code>.</code> 的大写和小写标签名却不是。</p>
<ol>
<li><code>&lt;component /&gt;</code> 将被转换为 <code>React.createElement(&#39;component&#39;)</code> (i.e, HTML 标签)</li>
<li><code>&lt;obj.component /&gt;</code> 将被转换为 <code>React.createElement(obj.component)</code></li>
<li><code>&lt;Component /&gt;</code> 将被转换为 <code>React.createElement(Component)</code></li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么组件的构造函数只被调用一次"><a href="#为什么组件的构造函数只被调用一次" class="headerlink" title="为什么组件的构造函数只被调用一次?"></a>为什么组件的构造函数只被调用一次?</h3><p>React 协调算法假设如果自定义组件出现在后续渲染的相同位置，则它与之前的组件相同，因此重用前一个实例而不是创建新实例。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中如何定义常量"><a href="#在-React-中如何定义常量" class="headerlink" title="在 React 中如何定义常量?"></a>在 React 中如何定义常量?</h3><p>你可以使用 ES7 的 <code>static</code> 来定义常量。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> DEFAULT_PAGINATION = <span class="number">10</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中如何以编程方式触发点击事件"><a href="#在-React-中如何以编程方式触发点击事件" class="headerlink" title="在 React 中如何以编程方式触发点击事件?"></a>在 React 中如何以编程方式触发点击事件?</h3><p>你可以使用 ref 属性通过回调函数获取对底层的 <code>HTMLinputeElement</code> 对象的引用，并将该引用存储为类属性，之后你就可以利用该引用在事件回调函数中， 使用 <code>HTMLElement.click</code> 方法触发一个点击事件。这可以分为两个步骤：</p>
<ol>
<li><p>在 render 方法创建一个 ref：</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input ref=&#123;input =&gt; <span class="keyword">this</span>.inputElement = input&#125; /&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>在事件处理器中触发点击事件</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.inputElement.click()</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中是否可以使用-async-await"><a href="#在-React-中是否可以使用-async-await" class="headerlink" title="在 React 中是否可以使用 async/await?"></a>在 React 中是否可以使用 async/await?</h3><p>如果要在 React 中使用 <code>async</code>/<code>await</code>，则需要 <em>Babel</em> 和 <a href="https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator" target="_blank" rel="noopener">transform-async-to-generator</a> 插件。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-项目常见的文件结构是什么"><a href="#React-项目常见的文件结构是什么" class="headerlink" title="React 项目常见的文件结构是什么?"></a>React 项目常见的文件结构是什么?</h3><p>React 项目文件结构有两种常见的实践。</p>
<ol>
<li><p><strong>按功能或路由分组:</strong></p>
<p> 构建项目的一种常见方法是将 CSS，JS 和测试用例放在一起，按功能或路由分组。</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">common/</span><br><span class="line">├─ Avatar.js</span><br><span class="line">├─ Avatar.css</span><br><span class="line">├─ APIUtils.js</span><br><span class="line">└─ APIUtils.test.js</span><br><span class="line">feed/</span><br><span class="line">├─ index.js</span><br><span class="line">├─ Feed.js</span><br><span class="line">├─ Feed.css</span><br><span class="line">├─ FeedStory.js</span><br><span class="line">├─ FeedStory.test.js</span><br><span class="line">└─ FeedAPI.js</span><br><span class="line">profile/</span><br><span class="line">├─ index.js</span><br><span class="line">├─ Profile.js</span><br><span class="line">├─ ProfileHeader.js</span><br><span class="line">├─ ProfileHeader.css</span><br><span class="line">└─ ProfileAPI.js</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>按文件类型分组:</strong></p>
<p> 另一种流行的项目结构组织方法是将类似的文件组合在一起。</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">api/</span><br><span class="line">├─ APIUtils.js</span><br><span class="line">├─ APIUtils.test.js</span><br><span class="line">├─ ProfileAPI.js</span><br><span class="line">└─ UserAPI.js</span><br><span class="line">components/</span><br><span class="line">├─ Avatar.js</span><br><span class="line">├─ Avatar.css</span><br><span class="line">├─ Feed.js</span><br><span class="line">├─ Feed.css</span><br><span class="line">├─ FeedStory.js</span><br><span class="line">├─ FeedStory.test.js</span><br><span class="line">├─ Profile.js</span><br><span class="line">├─ ProfileHeader.js</span><br><span class="line">└─ ProfileHeader.css</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="最流行的动画软件包是什么"><a href="#最流行的动画软件包是什么" class="headerlink" title="最流行的动画软件包是什么?"></a>最流行的动画软件包是什么?</h3><p><em>React Transition Group</em> 和 <em>React Motion</em> 是React生态系统中流行的动画包。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="模块化样式文件有什么好处"><a href="#模块化样式文件有什么好处" class="headerlink" title="模块化样式文件有什么好处?"></a>模块化样式文件有什么好处?</h3><p>建议避免在组件中对样式值进行硬编码。任何可能在不同的 UI 组件之间使用的值都应该提取到它们自己的模块中。</p>
<p>例如，可以将这些样式提取到单独的组件中：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> colors = &#123;</span><br><span class="line">  white,</span><br><span class="line">  black,</span><br><span class="line">  blue</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> space = [</span><br><span class="line">  <span class="number">0</span>,</span><br><span class="line">  <span class="number">8</span>,</span><br><span class="line">  <span class="number">16</span>,</span><br><span class="line">  <span class="number">32</span>,</span><br><span class="line">  <span class="number">64</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p>然后在其他组件中单独导入：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; space, colors &#125; <span class="keyword">from</span> <span class="string">'./styles'</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<ol start="126">
<li><h3 id="什么是-React-流行的特定-linters"><a href="#什么是-React-流行的特定-linters" class="headerlink" title="什么是 React 流行的特定 linters?"></a>什么是 React 流行的特定 linters?</h3><p>ESLint 是一个流行的 JavaScript linter。有一些插件可以分析特定的代码样式。在 React 中最常见的一个是名为 <code>eslint-plugin-react</code> npm 包。默认情况下，它将使用规则检查许多最佳实践，检查内容从迭代器中的键到一组完整的 prop 类型。另一个流行的插件是 <code>eslint-plugin-jsx-a11y</code>，它将帮助修复可访问性的常见问题。由于 JSX 提供的语法与常规 HTML 略有不同，因此常规插件无法获取 <code>alt</code> 文本和 <code>tabindex</code> 的问题。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何发起-AJAX-调用以及应该在哪些组件生命周期方法中进行-AJAX-调用"><a href="#如何发起-AJAX-调用以及应该在哪些组件生命周期方法中进行-AJAX-调用" class="headerlink" title="如何发起 AJAX 调用以及应该在哪些组件生命周期方法中进行 AJAX 调用?"></a>如何发起 AJAX 调用以及应该在哪些组件生命周期方法中进行 AJAX 调用?</h3><p>你可以使用 AJAX 库，如 Axios，jQuery AJAX 和浏览器内置的 <code>fetch</code> API。你应该在 <code>componentDidMount()</code> 生命周期方法中获取数据。这样当获取到数据的时候，你就可以使用 <code>setState()</code> 方法来更新你的组件。</p>
<p>例如，从 API 中获取员工列表并设置本地状态：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props)</span><br><span class="line">    <span class="keyword">this</span>.state = &#123;</span><br><span class="line">      employees: [],</span><br><span class="line">      error: <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  componentDidMount() &#123;</span><br><span class="line">    fetch(<span class="string">'https://api.example.com/items'</span>)</span><br><span class="line">      .then(<span class="function"><span class="params">res</span> =&gt;</span> res.json())</span><br><span class="line">      .then(</span><br><span class="line">        (result) =&gt; &#123;</span><br><span class="line">          <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">            employees: result.employees</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        (error) =&gt; &#123;</span><br><span class="line">          <span class="keyword">this</span>.setState(&#123; error &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      )</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; error, employees &#125; = <span class="keyword">this</span>.state</span><br><span class="line">    <span class="keyword">if</span> (error) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Error: &#123;error.message&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &#123;employees.map(<span class="function"><span class="params">item</span> =&gt;</span> (</span><br><span class="line">            &lt;li key=&#123;employee.name&#125;&gt;</span><br><span class="line">              &#123;employee.name&#125;-&#123;employees.experience&#125;</span><br><span class="line">            &lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">          ))&#125;</span></span><br><span class="line"><span class="regexp">        &lt;/u</span>l&gt;</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是渲染属性"><a href="#什么是渲染属性" class="headerlink" title="什么是渲染属性?"></a>什么是渲染属性?</h3><p><strong>Render Props</strong> 是一种简单的技术，用于使用值为函数的 prop 属性在组件之间共享代码。下面的组件使用返回 React 元素的 render 属性：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;DataProvider render=&#123;data =&gt; (</span><br><span class="line">  &lt;h1&gt;&#123;<span class="string">`Hello <span class="subst">$&#123;data.target&#125;</span>`</span>&#125;&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">)&#125;/</span>&gt;</span><br></pre></td></tr></table></figure>
<p>像 React Router 和 DownShift 这样的库使用了这种模式。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<h2 id="React-Router"><a href="#React-Router" class="headerlink" title="React Router"></a>React Router</h2><ol start="129">
<li><h3 id="什么是-React-Router"><a href="#什么是-React-Router" class="headerlink" title="什么是 React Router?"></a>什么是 React Router?</h3><p>React Router 是一个基于 React 之上的强大路由库，可以帮助您快速地向应用添加视图和数据流，同时保持 UI 与 URL 同步。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-Router-与-history-库的区别"><a href="#React-Router-与-history-库的区别" class="headerlink" title="React Router 与 history 库的区别?"></a>React Router 与 history 库的区别?</h3><p>React Router 是<code>history</code>库的包装器，它处理浏览器的<code>window.history</code>与浏览器和哈希历史的交互。它还提供了内存历史记录，这对于没有全局历史记录的环境非常有用，例如移动应用程序开发（React Native）和使用 Node 进行单元测试。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-Router-v4-中的-lt-Router-gt-组件是什么"><a href="#在-React-Router-v4-中的-lt-Router-gt-组件是什么" class="headerlink" title="在 React Router v4 中的&lt;Router&gt;组件是什么?"></a>在 React Router v4 中的<code>&lt;Router&gt;</code>组件是什么?</h3><p>React Router v4 提供了以下三种类型的 <code>&lt;Router&gt;</code> 组件:</p>
<ol>
<li><code>&lt;BrowserRouter&gt;</code></li>
<li><code>&lt;HashRouter&gt;</code></li>
<li><code>&lt;MemoryRouter&gt;</code></li>
</ol>
<p>以上组件将创建<em>browser</em>，<em>hash</em>和<em>memory</em>的 history 实例。React Router v4 通过<code>router</code>对象中的上下文使与您的路由器关联的<code>history</code>实例的属性和方法可用。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="history-中的-push-和-replace-方法的目的是什么"><a href="#history-中的-push-和-replace-方法的目的是什么" class="headerlink" title="history 中的 push() 和 replace() 方法的目的是什么?"></a><code>history</code> 中的 <code>push()</code> 和 <code>replace()</code> 方法的目的是什么?</h3><p>一个 history 实例有两种导航方法：</p>
<ol>
<li><code>push()</code></li>
<li><code>replace()</code></li>
</ol>
<p>如果您将 history 视为一个访问位置的数组，则<code>push()</code>将向数组添加一个新位置，<code>replace()</code>将用新的位置替换数组中的当前位置。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何使用在-React-Router-v4-中以编程的方式进行导航"><a href="#如何使用在-React-Router-v4-中以编程的方式进行导航" class="headerlink" title="如何使用在 React Router v4 中以编程的方式进行导航?"></a>如何使用在 React Router v4 中以编程的方式进行导航?</h3><p>在组件中实现操作路由/导航有三种不同的方法。</p>
<ol>
<li><p><strong>使用<code>withRouter()</code>高阶函数：</strong></p>
<p> <code>withRouter()</code>高阶函数将注入 history 对象作为组件的 prop。该对象提供了<code>push()</code>和<code>replace()</code>方法，以避免使用上下文。</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; withRouter &#125; <span class="keyword">from</span> <span class="string">'react-router-dom'</span> <span class="comment">// this also works with 'react-router-native'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Button = withRouter(<span class="function">(<span class="params">&#123; history &#125;</span>) =&gt;</span> (</span><br><span class="line">  &lt;button</span><br><span class="line">    type=<span class="string">'button'</span></span><br><span class="line">    onClick=&#123;() =&gt; &#123; history.push(<span class="string">'/new-location'</span>) &#125;&#125;</span><br><span class="line">  &gt;</span><br><span class="line">    &#123;<span class="string">'Click Me!'</span>&#125;</span><br><span class="line">  &lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">))</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>使用<code>&lt;Route&gt;</code>组件和渲染属性模式：</strong></p>
<p> <code>&lt;Route&gt;</code>组件传递与<code>withRouter()</code>相同的属性，因此您将能够通过 history 属性访问到操作历史记录的方法。</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Route &#125; <span class="keyword">from</span> <span class="string">'react-router-dom'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Button = <span class="function"><span class="params">()</span> =&gt;</span> (</span><br><span class="line">  &lt;Route render=&#123;(&#123; history &#125;) =&gt; (</span><br><span class="line">    &lt;button</span><br><span class="line">      type=<span class="string">'button'</span></span><br><span class="line">      onClick=&#123;() =&gt; &#123; history.push(<span class="string">'/new-location'</span>) &#125;&#125;</span><br><span class="line">    &gt;</span><br><span class="line">      &#123;<span class="string">'Click Me!'</span>&#125;</span><br><span class="line">    &lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">  )&#125; /</span>&gt;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>使用上下文:</strong></p>
<p> 建议不要使用此选项，并将其视为不稳定的API。</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Button = <span class="function">(<span class="params">props, context</span>) =&gt;</span> (</span><br><span class="line">  &lt;button</span><br><span class="line">    type=<span class="string">'button'</span></span><br><span class="line">    onClick=&#123;() =&gt; &#123;</span><br><span class="line">      context.history.push(<span class="string">'/new-location'</span>)</span><br><span class="line">    &#125;&#125;</span><br><span class="line">  &gt;</span><br><span class="line">    &#123;<span class="string">'Click Me!'</span>&#125;</span><br><span class="line">  &lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">)</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">Button.contextTypes = &#123;</span></span><br><span class="line"><span class="regexp">  history: React.PropTypes.shape(&#123;</span></span><br><span class="line"><span class="regexp">    push: React.PropTypes.func.isRequired</span></span><br><span class="line"><span class="regexp">  &#125;)</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-Router-v4-中获取查询字符串参数"><a href="#如何在-React-Router-v4-中获取查询字符串参数" class="headerlink" title="如何在 React Router v4 中获取查询字符串参数?"></a>如何在 React Router v4 中获取查询字符串参数?</h3><p>在 React Router v4 中并没有内置解析查询字符串的能力，因为多年来一直有用户希望支持不同的实现。因此，使用者可以选择他们喜欢的实现方式。建议的方法是使用 <a href="https://www.npmjs.com/package/query-string" target="_blank" rel="noopener">query-string</a> 库。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> queryString = <span class="built_in">require</span>(<span class="string">'query-string'</span>);</span><br><span class="line"><span class="keyword">const</span> parsed = queryString.parse(props.location.search);</span><br></pre></td></tr></table></figure>
<p>如果你想要使用原生 API 的话，你也可以使用 <code>URLSearchParams</code> ：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> params = <span class="keyword">new</span> URLSearchParams(props.location.search)</span><br><span class="line"><span class="keyword">const</span> foo = params.get(<span class="string">'name'</span>)</span><br></pre></td></tr></table></figure>
<p>如果使用 <code>URLSearchParams</code> 的话您应该为 IE11 使用<em>polyfill</em>。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么你会得到-“Router-may-have-only-one-child-element”-警告"><a href="#为什么你会得到-“Router-may-have-only-one-child-element”-警告" class="headerlink" title="为什么你会得到 “Router may have only one child element” 警告?"></a>为什么你会得到 “Router may have only one child element” 警告?</h3><p>此警告的意思是<code>Router</code>组件下仅能包含一个子节点。</p>
<p>你必须将你的 Route 包装在<code>&lt;Switch&gt;</code>块中，因为<code>&lt;Switch&gt;</code>是唯一的，它只提供一个路由。</p>
<p>首先，您需要在导入中添加<code>Switch</code>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Switch, Router, Route &#125; <span class="keyword">from</span> <span class="string">'react-router'</span></span><br></pre></td></tr></table></figure>
<p>然后在<code>&lt;Switch&gt;</code>块中定义路由：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;Router&gt;</span><br><span class="line">  &lt;Switch&gt;</span><br><span class="line">    &lt;Route &#123;<span class="comment">/* ... */</span>&#125; /&gt;</span><br><span class="line">    &lt;Route &#123;<span class="comment">/* ... */</span>&#125; /&gt;</span><br><span class="line">  &lt;<span class="regexp">/Switch&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>Router&gt;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-Router-v4-中将-params-传递给-history-push-方法"><a href="#如何在-React-Router-v4-中将-params-传递给-history-push-方法" class="headerlink" title="如何在 React Router v4 中将 params 传递给 history.push 方法?"></a>如何在 React Router v4 中将 params 传递给 <code>history.push</code> 方法?</h3><p>在导航时，您可以将 props 传递给<code>history</code>对象：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.props.history.push(&#123;</span><br><span class="line">  pathname: <span class="string">'/template'</span>,</span><br><span class="line">  search: <span class="string">'?name=sudheer'</span>,</span><br><span class="line">  state: &#123; <span class="attr">detail</span>: response.data &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><code>search</code>属性用于在<code>push()</code>方法中传递查询参数。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何实现默认页面或-404-页面"><a href="#如何实现默认页面或-404-页面" class="headerlink" title="如何实现默认页面或 404 页面?"></a>如何实现默认页面或 404 页面?</h3><p><code>&lt;Switch&gt;</code>呈现匹配的第一个孩子<code>&lt;Route&gt;</code>。 没有路径的<code>&lt;Route&gt;</code>总是匹配。所以你只需要简单地删除 path 属性，如下所示：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;Switch&gt;</span><br><span class="line">  &lt;Route exact path=<span class="string">"/"</span> component=&#123;Home&#125;/&gt;</span><br><span class="line">  &lt;Route path=<span class="string">"/user"</span> component=&#123;User&#125;/&gt;</span><br><span class="line">  &lt;Route component=&#123;NotFound&#125; /&gt;</span><br><span class="line">&lt;<span class="regexp">/Switch&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-Router-v4-上获取历史对象"><a href="#如何在-React-Router-v4-上获取历史对象" class="headerlink" title="如何在 React Router v4 上获取历史对象?"></a>如何在 React Router v4 上获取历史对象?</h3><ol>
<li><p>创建一个导出<code>history</code>对象的模块，并在整个项目中导入该模块。</p>
<p> 例如， 创建<code>history.js</code>文件:</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createBrowserHistory &#125; <span class="keyword">from</span> <span class="string">'history'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createBrowserHistory(&#123;</span><br><span class="line">  <span class="comment">/* pass a configuration object here if needed */</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>您应该使用<code>&lt;Router&gt;</code>组件而不是内置路由器。在<code>index.js</code>文件中导入上面的<code>history.js</code>：</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Router &#125; <span class="keyword">from</span> <span class="string">'react-router-dom'</span></span><br><span class="line"><span class="keyword">import</span> history <span class="keyword">from</span> <span class="string">'./history'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App'</span></span><br><span class="line"></span><br><span class="line">ReactDOM.render((</span><br><span class="line">  &lt;Router history=&#123;history&#125;&gt;</span><br><span class="line">    &lt;App /&gt;</span><br><span class="line">  &lt;<span class="regexp">/Router&gt;</span></span><br><span class="line"><span class="regexp">), holder)</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>您还可以使用类似于内置历史对象的<code>history</code>对象的push方法：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// some-other-file.js</span></span><br><span class="line"><span class="keyword">import</span> history <span class="keyword">from</span> <span class="string">'./history'</span></span><br><span class="line"></span><br><span class="line">history.push(<span class="string">'/go-here'</span>)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="登录后如何执行自动重定向"><a href="#登录后如何执行自动重定向" class="headerlink" title="登录后如何执行自动重定向?"></a>登录后如何执行自动重定向?</h3><p><code>react-router</code>包在 React Router 中提供了<code>&lt;Redirect&gt;</code>组件。渲染<code>&lt;Redirect&gt;</code>将导航到新位置。与服务器端重定向一样，新位置将覆盖历史堆栈中的当前位置。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> &#123; Redirect &#125; <span class="keyword">from</span> <span class="string">'react-router'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">LoginComponent</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.state.isLoggedIn === <span class="literal">true</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">Redirect</span> <span class="attr">to</span>=<span class="string">"/your/redirect/page"</span> /&gt;</span></span></span><br><span class="line"><span class="xml">    &#125; else &#123;</span></span><br><span class="line"><span class="xml">      return <span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;'Login Please'&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<h2 id="React-Internationalization"><a href="#React-Internationalization" class="headerlink" title="React Internationalization"></a>React Internationalization</h2><ol start="140">
<li><h3 id="什么是-React-Intl"><a href="#什么是-React-Intl" class="headerlink" title="什么是 React Intl?"></a>什么是 React Intl?</h3><p><a href="https://github.com/yahoo/react-intl" target="_blank" rel="noopener">React Intl</a>库使 React 中的内部化变得简单，使用现成的组件和 API ，可以处理从格式化字符串，日期和数字到复数的所有功能。React Intl 是<a href="http://formatjs.io/" target="_blank" rel="noopener">FormatJS</a>的一部分，它通过其组件和 API 提供与 React 的绑定。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-Intl-的主要特性是什么"><a href="#React-Intl-的主要特性是什么" class="headerlink" title="React Intl 的主要特性是什么?"></a>React Intl 的主要特性是什么?</h3><ol>
<li>用分隔符显示数字</li>
<li>正确显示日期和时间</li>
<li>显示相对于“现在”的日期</li>
<li>将标签转换为字符串</li>
<li>支持 150 多种语言</li>
<li>支持在浏览器和 Node 中运行</li>
<li>建立在标准之上</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-Intl-中有哪两种格式化方式"><a href="#在-React-Intl-中有哪两种格式化方式" class="headerlink" title="在 React Intl 中有哪两种格式化方式?"></a>在 React Intl 中有哪两种格式化方式?</h3><p>该库提供了两种格式化字符串，数字和日期的方法：React 组件或 API。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;FormattedMessage</span><br><span class="line">  id=&#123;<span class="string">'account'</span>&#125;</span><br><span class="line">  defaultMessage=&#123;<span class="string">'The amount is less than minimum balance.'</span>&#125;</span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> messages = defineMessages(&#123;</span><br><span class="line">  accountMessage: &#123;</span><br><span class="line">    id: <span class="string">'account'</span>,</span><br><span class="line">    defaultMessage: <span class="string">'The amount is less than minimum balance.'</span>,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">formatMessage(messages.accountMessage)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-Intl-中如何使用-lt-FormattedMessage-gt-作为占位符使用"><a href="#在-React-Intl-中如何使用-lt-FormattedMessage-gt-作为占位符使用" class="headerlink" title="在 React Intl 中如何使用&lt;FormattedMessage&gt;作为占位符使用?"></a>在 React Intl 中如何使用<code>&lt;FormattedMessage&gt;</code>作为占位符使用?</h3><p><code>react-intl</code>的<code>&lt;Formatted ... /&gt;</code>组件返回元素，而不是纯文本，因此它们不能用于占位符，替代文本等。在这种情况下，您应该使用较低级别的 API <code>formatMessage()</code>。您可以使用<code>injectIntl()</code>高阶函数将<code>intl</code>对象注入到组件中，然后使用该对象上使用<code>formatMessage()</code>格式化消息。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> &#123; injectIntl, intlShape &#125; <span class="keyword">from</span> <span class="string">'react-intl'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> MyComponent = <span class="function">(<span class="params">&#123; intl &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> placeholder = intl.formatMessage(&#123;<span class="attr">id</span>: <span class="string">'messageId'</span>&#125;)</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">placeholder</span>=<span class="string">&#123;placeholder&#125;</span> /&gt;</span></span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">MyComponent.propTypes = &#123;</span></span><br><span class="line"><span class="xml">  intl: intlShape.isRequired</span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">export default injectIntl(MyComponent)</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何使用-React-Intl-访问当前语言环境"><a href="#如何使用-React-Intl-访问当前语言环境" class="headerlink" title="如何使用 React Intl 访问当前语言环境?"></a>如何使用 React Intl 访问当前语言环境?</h3><p>您可以在应用的任何组件中使用<code>injectIntl()</code>获取的当前语言环境：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; injectIntl, intlShape &#125; <span class="keyword">from</span> <span class="string">'react-intl'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> MyComponent = <span class="function">(<span class="params">&#123; intl &#125;</span>) =&gt;</span> (</span><br><span class="line">  &lt;div&gt;&#123;<span class="string">`The current locale is <span class="subst">$&#123;intl.locale&#125;</span>`</span>&#125;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">)</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">MyComponent.propTypes = &#123;</span></span><br><span class="line"><span class="regexp">  intl: intlShape.isRequired</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default injectIntl(MyComponent)</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何使用-React-Intl-格式化日期"><a href="#如何使用-React-Intl-格式化日期" class="headerlink" title="如何使用 React Intl 格式化日期?"></a>如何使用 React Intl 格式化日期?</h3><p><code>injectIntl()</code>高阶组件将允许您通过组件中的 props 访问<code>formatDate()</code>方法。 该方法由<code>FormattedDate</code>实例在内部使用，它返回格式化日期的字符串表示。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; injectIntl, intlShape &#125; <span class="keyword">from</span> <span class="string">'react-intl'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> stringDate = <span class="keyword">this</span>.props.intl.formatDate(date, &#123;</span><br><span class="line">  year: <span class="string">'numeric'</span>,</span><br><span class="line">  month: <span class="string">'numeric'</span>,</span><br><span class="line">  day: <span class="string">'numeric'</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> MyComponent = <span class="function">(<span class="params">&#123;intl&#125;</span>) =&gt;</span> (</span><br><span class="line">  &lt;div&gt;&#123;<span class="string">`The formatted date is <span class="subst">$&#123;stringDate&#125;</span>`</span>&#125;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">)</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">MyComponent.propTypes = &#123;</span></span><br><span class="line"><span class="regexp">  intl: intlShape.isRequired</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default injectIntl(MyComponent)</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<h2 id="React-Testing"><a href="#React-Testing" class="headerlink" title="React Testing"></a>React Testing</h2><ol start="146">
<li><h3 id="在-React-测试中什么是浅层渲染（Shallow-Renderer）"><a href="#在-React-测试中什么是浅层渲染（Shallow-Renderer）" class="headerlink" title="在 React 测试中什么是浅层渲染（Shallow Renderer）?"></a>在 React 测试中什么是浅层渲染（Shallow Renderer）?</h3><p><em>浅层渲染</em>对于在 React 中编写单元测试用例很有用。它允许您渲染一个<em>一级深的组件</em>并断言其渲染方法返回的内容，而不必担心子组件未实例化或渲染。</p>
<p>例如，如果您有以下组件：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyComponent</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;span className=&#123;<span class="string">'heading'</span>&#125;&gt;&#123;<span class="string">'Title'</span>&#125;&lt;<span class="regexp">/span&gt;</span></span><br><span class="line"><span class="regexp">      &lt;span className=&#123;'description'&#125;&gt;&#123;'Description'&#125;&lt;/</span>span&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p>然后你可以如下断言：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> ShallowRenderer <span class="keyword">from</span> <span class="string">'react-test-renderer/shallow'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// in your test</span></span><br><span class="line"><span class="keyword">const</span> renderer = <span class="keyword">new</span> ShallowRenderer()</span><br><span class="line">renderer.render(<span class="xml"><span class="tag">&lt;<span class="name">MyComponent</span> /&gt;</span>)</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">const result = renderer.getRenderOutput()</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">expect(result.type).toBe('div')</span></span><br><span class="line"><span class="xml">expect(result.props.children).toEqual([</span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">className</span>=<span class="string">&#123;</span>'<span class="attr">heading</span>'&#125;&gt;</span>&#123;'Title'&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span>,</span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">span</span> <span class="attr">className</span>=<span class="string">&#123;</span>'<span class="attr">description</span>'&#125;&gt;</span>&#123;'Description'&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml">])</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中-TestRenderer-包是什么"><a href="#在-React-中-TestRenderer-包是什么" class="headerlink" title="在 React 中 TestRenderer 包是什么?"></a>在 React 中 <code>TestRenderer</code> 包是什么?</h3><p>此包提供了一个渲染器，可用于将组件渲染为纯 JavaScript 对象，而不依赖于 DOM 或原生移动环境。该包可以轻松获取由 ReactDOM 或 React Native 平台所渲染的视图层次结构（类似于DOM树）的快照，而无需使用浏览器或<code>jsdom</code>。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> TestRenderer <span class="keyword">from</span> <span class="string">'react-test-renderer'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Link = <span class="function">(<span class="params">&#123;page, children&#125;</span>) =&gt;</span> &lt;a href=&#123;page&#125;&gt;&#123;children&#125;&lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">const testRenderer = TestRenderer.create(</span></span><br><span class="line"><span class="regexp">  &lt;Link page=&#123;'https:/</span><span class="regexp">/www.facebook.com/</span><span class="string">'&#125;&gt;&#123;'</span>Facebook<span class="string">'&#125;&lt;/Link&gt;</span></span><br><span class="line"><span class="string">)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">console.log(testRenderer.toJSON())</span></span><br><span class="line"><span class="string">// &#123;</span></span><br><span class="line"><span class="string">//   type: '</span>a<span class="string">',</span></span><br><span class="line"><span class="string">//   props: &#123; href: '</span>https:<span class="comment">//www.facebook.com/' &#125;,</span></span><br><span class="line"><span class="comment">//   children: [ 'Facebook' ]</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="ReactTestUtils-包的目的是什么"><a href="#ReactTestUtils-包的目的是什么" class="headerlink" title="ReactTestUtils 包的目的是什么?"></a>ReactTestUtils 包的目的是什么?</h3><p><em>ReactTestUtils</em>由<code>with-addons</code>包提供，允许您对模拟 DOM 执行操作以进行单元测试。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Jest"><a href="#什么是-Jest" class="headerlink" title="什么是 Jest?"></a>什么是 Jest?</h3><p><em>Jest</em>是一个由 Facebook 基于 Jasmine 创建的 JavaScript 单元测试框架，提供自动模拟创建和<code>jsdom</code>环境。它通常用于测试组件。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Jest-对比-Jasmine-有什么优势"><a href="#Jest-对比-Jasmine-有什么优势" class="headerlink" title="Jest 对比 Jasmine 有什么优势?"></a>Jest 对比 Jasmine 有什么优势?</h3><p>与 Jasmine 相比，有几个优点： </p>
<ul>
<li>自动查找在源代码中要执行测试。</li>
<li>在运行测试时自动模拟依赖项。</li>
<li>允许您同步测试异步代码。</li>
<li>使用假的 DOM 实现（通过<code>jsdom</code>）运行测试，以便可以在命令行上运行测试。</li>
<li>在并行流程中运行测试，以便更快完成。</li>
</ul>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="举一个简单的-Jest-测试用例"><a href="#举一个简单的-Jest-测试用例" class="headerlink" title="举一个简单的 Jest 测试用例"></a>举一个简单的 Jest 测试用例</h3><p>让我们为<code>sum.js</code>文件中添加两个数字的函数编写一个测试：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> sum = <span class="function">(<span class="params">a, b</span>) =&gt;</span> a + b</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> sum</span><br></pre></td></tr></table></figure>
<p>创建一个名为<code>sum.test.js</code>的文件，其中包含实际测试：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> sum <span class="keyword">from</span> <span class="string">'./sum'</span></span><br><span class="line"></span><br><span class="line">test(<span class="string">'adds 1 + 2 to equal 3'</span>, () =&gt; &#123;</span><br><span class="line">  expect(sum(<span class="number">1</span>, <span class="number">2</span>)).toBe(<span class="number">3</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>然后将以下部分添加到<code>package.json</code>：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"jest"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>最后，运行<code>yarn test</code>或<code>npm test</code>，Jest 将打印结果：</p>
<figure class="highlight console"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> yarn <span class="built_in">test</span></span></span><br><span class="line">PASS ./sum.test.js</span><br><span class="line">✓ adds 1 + 2 to equal 3 (2ms)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<h2 id="React-Redux"><a href="#React-Redux" class="headerlink" title="React Redux"></a>React Redux</h2><ol start="152">
<li><h3 id="什么是-Flux"><a href="#什么是-Flux" class="headerlink" title="什么是 Flux?"></a>什么是 Flux?</h3><p><em>Flux</em> 是<em>应用程序设计范例</em>，用于替代更传统的 MVC 模式。它不是一个框架或库，而是一种新的体系结构，它补充了 React 和单向数据流的概念。在使用 React 时，Facebook 会在内部使用此模式。</p>
<p>在 dispatcher，stores 和视图组件具有如下不同的输入和输出：</p>
<p><img src="images/flux.png" alt="flux"></p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Redux"><a href="#什么是-Redux" class="headerlink" title="什么是 Redux?"></a>什么是 Redux?</h3><p><em>Redux</em> 是基于 <em>Flux设计模式</em> 的 JavaScript 应用程序的可预测状态容器。Redux 可以与 React 一起使用，也可以与任何其他视图库一起使用。它很小（约2kB）并且没有依赖性。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Redux-的核心原则是什么？"><a href="#Redux-的核心原则是什么？" class="headerlink" title="Redux 的核心原则是什么？?"></a>Redux 的核心原则是什么？?</h3><p>Redux 遵循三个基本原则：</p>
<ol>
<li><strong>单一数据来源：</strong> 整个应用程序的状态存储在单个对象树中。单状态树可以更容易地跟踪随时间的变化并调试或检查应用程序。</li>
<li><strong>状态是只读的：</strong> 改变状态的唯一方法是发出一个动作，一个描述发生的事情的对象。这可以确保视图和网络请求都不会直接写入状态。</li>
<li><strong>使用纯函数进行更改：</strong> 要指定状态树如何通过操作进行转换，您可以编写reducers。Reducers 只是纯函数，它将先前的状态和操作作为参数，并返回下一个状态。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="与-Flux-相比，Redux-的缺点是什么"><a href="#与-Flux-相比，Redux-的缺点是什么" class="headerlink" title="与 Flux 相比，Redux 的缺点是什么?"></a>与 Flux 相比，Redux 的缺点是什么?</h3><p>我们应该说使用 Redux 而不是 Flux 几乎没有任何缺点。这些如下：</p>
<ol>
<li><strong>您将需要学会避免突变：</strong> Flux 对变异数据毫不吝啬，但 Redux 不喜欢突变，许多与 Redux 互补的包假设您从不改变状态。您可以使用 dev-only 软件包强制执行此操作，例如<code>redux-immutable-state-invariant</code>，Immutable.js，或指示您的团队编写非变异代码。</li>
<li><strong>您将不得不仔细选择您的软件包：</strong> 虽然 Flux 明确没有尝试解决诸如撤消/重做，持久性或表单之类的问题，但 Redux 有扩展点，例如中间件和存储增强器，以及它催生了丰富的生态系统。</li>
<li><strong>还没有很好的 Flow 集成：</strong> Flux 目前可以让你做一些非常令人印象深刻的静态类型检查，Redux 还不支持。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="mapStateToProps-和-mapDispatchToProps-之间有什么区别"><a href="#mapStateToProps-和-mapDispatchToProps-之间有什么区别" class="headerlink" title="mapStateToProps() 和 mapDispatchToProps() 之间有什么区别?"></a><code>mapStateToProps()</code> 和 <code>mapDispatchToProps()</code> 之间有什么区别?</h3><p><code>mapStateToProps()</code>是一个实用方法，它可以帮助您的组件获得最新的状态（由其他一些组件更新）：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mapStateToProps = <span class="function">(<span class="params">state</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    todos: getVisibleTodos(state.todos, state.visibilityFilter)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><code>mapDispatchToProps()</code>是一个实用方法，它可以帮助你的组件触发一个动作事件（可能导致应用程序状态改变的调度动作）：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mapDispatchToProps = <span class="function">(<span class="params">dispatch</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    onTodoClick: <span class="function">(<span class="params">id</span>) =&gt;</span> &#123;</span><br><span class="line">      dispatch(toggleTodo(id))</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="我可以在-reducer-中触发一个-Action-吗"><a href="#我可以在-reducer-中触发一个-Action-吗" class="headerlink" title="我可以在 reducer 中触发一个 Action 吗?"></a>我可以在 reducer 中触发一个 Action 吗?</h3><p>在 reducer 中触发 Action 是<strong>反模式</strong>。您的 reducer 应该<em>没有副作用</em>，只是接收 Action 并返回一个新的状态对象。在 reducer 中添加侦听器和调度操作可能会导致链接的 Action 和其他副作用。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在组件外部访问-Redux-存储的对象"><a href="#如何在组件外部访问-Redux-存储的对象" class="headerlink" title="如何在组件外部访问 Redux 存储的对象?"></a>如何在组件外部访问 Redux 存储的对象?</h3><p>是的，您只需要使用<code>createStore()</code>从它创建的模块中导出存储。此外，它不应污染全局窗口对象。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">store = createStore(myReducer)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="MVW-模式的缺点是什么"><a href="#MVW-模式的缺点是什么" class="headerlink" title="MVW 模式的缺点是什么?"></a>MVW 模式的缺点是什么?</h3><ol>
<li>DOM 操作非常昂贵，导致应用程序行为缓慢且效率低下。</li>
<li>由于循环依赖性，围绕模型和视图创建了复杂的模型。</li>
<li>协作型应用程序（如Google Docs）会发生大量数据更改。</li>
<li>无需添加太多额外代码就无法轻松撤消（及时回退）。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Redux-和-RxJS-之间是否有任何相似之处"><a href="#Redux-和-RxJS-之间是否有任何相似之处" class="headerlink" title="Redux 和 RxJS 之间是否有任何相似之处?"></a>Redux 和 RxJS 之间是否有任何相似之处?</h3><p>这些库的目的是不同的，但是存在一些模糊的相似之处。</p>
<p>Redux 是一个在整个应用程序中管理状态的工具。它通常用作 UI 的体系结构。可以将其视为（一半）Angular 的替代品。 RxJS 是一个反应式编程库。它通常用作在 JavaScript 中完成异步任务的工具。把它想象成 Promise 的替代品。 Redux 使用 Reactive 范例，因为Store是被动的。Store 检测到 Action，并自行改变。RxJS也使用 Reactive 范例，但它不是一个体系结构，它为您提供了基本构建块 Observables 来完成这种模式。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在加载时触发-Action"><a href="#如何在加载时触发-Action" class="headerlink" title="如何在加载时触发 Action?"></a>如何在加载时触发 Action?</h3><p>您可以在<code>componentDidMount()</code>方法中触发 Action，然后在<code>render()</code>方法中可以验证数据。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  componentDidMount() &#123;</span><br><span class="line">    <span class="keyword">this</span>.props.fetchData()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.props.isLoaded</span><br><span class="line">      ? <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;'Loaded'&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">      : <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;'Not Loaded'&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapStateToProps = <span class="function">(<span class="params">state</span>) =&gt;</span> (&#123;</span><br><span class="line">  isLoaded: state.isLoaded</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapDispatchToProps = &#123; fetchData &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(mapStateToProps, mapDispatchToProps)(App)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中如何使用-Redux-的-connect"><a href="#在-React-中如何使用-Redux-的-connect" class="headerlink" title="在 React 中如何使用 Redux 的 connect() ?"></a>在 React 中如何使用 Redux 的 <code>connect()</code> ?</h3><p>您需要按照两个步骤在容器中使用您的 Store：</p>
<ol>
<li><strong>使用<code>mapStateToProps()</code>：</strong> 它将 Store 中的状态变量映射到您指定的属性。</li>
<li><p><strong>将上述属性连接到容器：</strong> <code>mapStateToProps</code>函数返回的对象连接到容器。你可以从<code>react-redux</code>导入<code>connect()</code>。</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> &#123; connect &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;this.props.containerData&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mapStateToProps</span>(<span class="params">state</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">containerData</span>: state.data &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(mapStateToProps)(App)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-Redux-中重置状态"><a href="#如何在-Redux-中重置状态" class="headerlink" title="如何在 Redux 中重置状态?"></a>如何在 Redux 中重置状态?</h3><p>你需要在你的应用程序中编写一个<em>root reducer</em>，它将处理动作委托给<code>combineReducers()</code>生成的 reducer。</p>
<p>例如，让我们在<code>USER_LOGOUT</code>动作之后让<code>rootReducer()</code>返回初始状态。我们知道，无论 Action 怎么样，当使用<code>undefined</code>作为第一个参数调用它们时，reducers 应该返回初始状态。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> appReducer = combineReducers(&#123;</span><br><span class="line">  <span class="comment">/* your app's top-level reducers */</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> rootReducer = <span class="function">(<span class="params">state, action</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (action.type === <span class="string">'USER_LOGOUT'</span>) &#123;</span><br><span class="line">    state = <span class="literal">undefined</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> appReducer(state, action)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>如果使用<code>redux-persist</code>，您可能还需要清理存储空间。<code>redux-persist</code>在 storage 引擎中保存您的状态副本。首先，您需要导入适当的 storage 引擎，然后在将其设置为<code>undefined</code>之前解析状态并清理每个存储状态键。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> appReducer = combineReducers(&#123;</span><br><span class="line">  <span class="comment">/* your app's top-level reducers */</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> rootReducer = <span class="function">(<span class="params">state, action</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (action.type === <span class="string">'USER_LOGOUT'</span>) &#123;</span><br><span class="line">    <span class="built_in">Object</span>.keys(state).forEach(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">      storage.removeItem(<span class="string">`persist:<span class="subst">$&#123;key&#125;</span>`</span>)</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    state = <span class="literal">undefined</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> appReducer(state, action)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Redux-中连接装饰器的-at-符号的目的是什么"><a href="#Redux-中连接装饰器的-at-符号的目的是什么" class="headerlink" title="Redux 中连接装饰器的 at 符号的目的是什么?"></a>Redux 中连接装饰器的 <code>at</code> 符号的目的是什么?</h3><p><strong>@</strong> 符号实际上是用于表示装饰器的 JavaScript 表达式。<em>装饰器</em>可以在设计时注释和修改类和属性。</p>
<p>让我们举个例子，在没有装饰器的情况下设置 Redux 。</p>
<ul>
<li><p><strong>未使用装饰器:</strong></p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> actionCreators <span class="keyword">from</span> <span class="string">'./actionCreators'</span></span><br><span class="line"><span class="keyword">import</span> &#123; bindActionCreators &#125; <span class="keyword">from</span> <span class="string">'redux'</span></span><br><span class="line"><span class="keyword">import</span> &#123; connect &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mapStateToProps</span>(<span class="params">state</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">todos</span>: state.todos &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mapDispatchToProps</span>(<span class="params">dispatch</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">actions</span>: bindActionCreators(actionCreators, dispatch) &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyApp</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="comment">// ...define your main app here</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(mapStateToProps, mapDispatchToProps)(MyApp)</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>使用装饰器:</strong></p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> actionCreators <span class="keyword">from</span> <span class="string">'./actionCreators'</span></span><br><span class="line"><span class="keyword">import</span> &#123; bindActionCreators &#125; <span class="keyword">from</span> <span class="string">'redux'</span></span><br><span class="line"><span class="keyword">import</span> &#123; connect &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mapStateToProps</span>(<span class="params">state</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">todos</span>: state.todos &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mapDispatchToProps</span>(<span class="params">dispatch</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">actions</span>: bindActionCreators(actionCreators, dispatch) &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">@connect(mapStateToProps, mapDispatchToProps)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">MyApp</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="comment">// ...define your main app here</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>除了装饰器的使用外，上面的例子几乎相似。装饰器语法尚未构建到任何 JavaScript 运行时中，并且仍然是实验性的并且可能会发生变化。您可以使用<code>babel</code>来获得装饰器支持。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-上下文和-React-Redux-之间有什么区别"><a href="#React-上下文和-React-Redux-之间有什么区别" class="headerlink" title="React 上下文和 React Redux 之间有什么区别?"></a>React 上下文和 React Redux 之间有什么区别?</h3><p>您可以直接在应用程序中使用<strong>Context</strong>，这对于将数据传递给深度嵌套的组件非常有用。而<strong>Redux</strong>功能更强大，它还提供了 Context API 无法提供的大量功能。此外，React Redux 在内部使用上下文，但它不会在公共 API 中有所体现。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么-Redux-状态函数称为-reducers"><a href="#为什么-Redux-状态函数称为-reducers" class="headerlink" title="为什么 Redux 状态函数称为 reducers ?"></a>为什么 Redux 状态函数称为 reducers ?</h3><p>Reducers 总是返回状态的累积（基于所有先前状态和当前 Action）。因此，它们充当了状态的 Reducer。每次调用 Redux reducer 时，状态和 Action 都将作为参数传递。然后基于该 Action 减少（或累积）该状态，然后返回下一状态。您可以<em>reduce</em>一组操作和一个初始状态（Store），在该状态下执行这些操作以获得最终的最终状态。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-Redux-中发起-AJAX-请求"><a href="#如何在-Redux-中发起-AJAX-请求" class="headerlink" title="如何在 Redux 中发起 AJAX 请求?"></a>如何在 Redux 中发起 AJAX 请求?</h3><p>您可以使用<code>redux-thunk</code>中间件，它允许您定义异步操作。</p>
<p>让我们举个例子，使用<em>fetch API</em>将特定帐户作为 AJAX 调用获取：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">fetchAccount</span>(<span class="params">id</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="params">dispatch</span> =&gt;</span> &#123;</span><br><span class="line">    dispatch(setLoadingAccountState()) <span class="comment">// Show a loading spinner</span></span><br><span class="line">    fetch(<span class="string">`/account/<span class="subst">$&#123;id&#125;</span>`</span>, (response) =&gt; &#123;</span><br><span class="line">      dispatch(doneFetchingAccount()) <span class="comment">// Hide loading spinner</span></span><br><span class="line">      <span class="keyword">if</span> (response.status === <span class="number">200</span>) &#123;</span><br><span class="line">        dispatch(setAccount(response.json)) <span class="comment">// Use a normal function to set the received state</span></span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        dispatch(someError)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setAccount</span>(<span class="params">data</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">return</span> &#123; <span class="attr">type</span>: <span class="string">'SET_Account'</span>, <span class="attr">data</span>: data &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="我应该在-Redux-Store-中保留所有组件的状态吗"><a href="#我应该在-Redux-Store-中保留所有组件的状态吗" class="headerlink" title="我应该在 Redux Store 中保留所有组件的状态吗?"></a>我应该在 Redux Store 中保留所有组件的状态吗?</h3><p> 将数据保存在 Redux 存储中，并在组件内部保持 UI 相关状态。</p>
<p> <strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="访问-Redux-Store-的正确方法是什么"><a href="#访问-Redux-Store-的正确方法是什么" class="headerlink" title="访问 Redux Store 的正确方法是什么?"></a>访问 Redux Store 的正确方法是什么?</h3><p>在组件中访问 Store 的最佳方法是使用<code>connect()</code>函数，该函数创建一个包裹现有组件的新组件。此模式称为<em>高阶组件</em>，通常是在 React 中扩展组件功能的首选方式。这允许您将状态和 Action 创建者映射到组件，并在 Store 更新时自动传递它们。</p>
<p>我们来看一个使用 connect 的<code>&lt;FilterLink&gt;</code>组件的例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; connect &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span></span><br><span class="line"><span class="keyword">import</span> &#123; setVisibilityFilter &#125; <span class="keyword">from</span> <span class="string">'../actions'</span></span><br><span class="line"><span class="keyword">import</span> Link <span class="keyword">from</span> <span class="string">'../components/Link'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapStateToProps = <span class="function">(<span class="params">state, ownProps</span>) =&gt;</span> (&#123;</span><br><span class="line">  active: ownProps.filter === state.visibilityFilter</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapDispatchToProps = <span class="function">(<span class="params">dispatch, ownProps</span>) =&gt;</span> (&#123;</span><br><span class="line">  onClick: <span class="function"><span class="params">()</span> =&gt;</span> dispatch(setVisibilityFilter(ownProps.filter))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> FilterLink = connect(</span><br><span class="line">  mapStateToProps,</span><br><span class="line">  mapDispatchToProps</span><br><span class="line">)(Link)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> FilterLink</span><br></pre></td></tr></table></figure>
<p>由于它具有相当多的性能优化并且通常不太可能导致错误，因此 Redux 开发人员几乎总是建议使用<code>connect()</code>直接访问 Store（使用上下文API）。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> </span>&#123;</span><br><span class="line">  someMethod() &#123;</span><br><span class="line">    doSomethingWith(<span class="keyword">this</span>.context.store)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-Redux-中展示组件和容器组件之间的区别是什么"><a href="#React-Redux-中展示组件和容器组件之间的区别是什么" class="headerlink" title="React Redux 中展示组件和容器组件之间的区别是什么?"></a>React Redux 中展示组件和容器组件之间的区别是什么?</h3><p><strong>展示组件</strong>是一个类或功能组件，用于描述应用程序的展示部分。</p>
<p><strong>容器组件</strong>是连接到 Redux Store的组件的非正式术语。容器组件<em>订阅</em> Redux 状态更新和<em>dispatch</em>操作，它们通常不呈现 DOM 元素；他们将渲染委托给展示性的子组件。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Redux-中常量的用途是什么"><a href="#Redux-中常量的用途是什么" class="headerlink" title="Redux 中常量的用途是什么?"></a>Redux 中常量的用途是什么?</h3><p>常量允许您在使用 IDE 时轻松查找项目中该特定功能的所有用法。它还可以防止你拼写错误，在这种情况下，你会立即得到一个<code>ReferenceError</code>。</p>
<p>通常我们会将它们保存在一个文件中（<code>constants.js</code>或<code>actionTypes.js</code>）。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> ADD_TODO = <span class="string">'ADD_TODO'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> DELETE_TODO = <span class="string">'DELETE_TODO'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> EDIT_TODO = <span class="string">'EDIT_TODO'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> COMPLETE_TODO = <span class="string">'COMPLETE_TODO'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> COMPLETE_ALL = <span class="string">'COMPLETE_ALL'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> CLEAR_COMPLETED = <span class="string">'CLEAR_COMPLETED'</span></span><br></pre></td></tr></table></figure>
<p>在 Redux 中，您可以在两个地方使用它们：</p>
<ol>
<li><p><strong>在 Action 创建时:</strong></p>
<p> 让我们看看 <code>actions.js</code>:</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ADD_TODO &#125; <span class="keyword">from</span> <span class="string">'./actionTypes'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">addTodo</span>(<span class="params">text</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">type</span>: ADD_TODO, text &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>在 reducers 里:</strong></p>
<p> 让我们创建 <code>reducer.js</code> 文件:</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ADD_TODO &#125; <span class="keyword">from</span> <span class="string">'./actionTypes'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> (state = [], action) =&gt; &#123;</span><br><span class="line">  <span class="keyword">switch</span> (action.type) &#123;</span><br><span class="line">    <span class="keyword">case</span> ADD_TODO:</span><br><span class="line">      <span class="keyword">return</span> [</span><br><span class="line">        ...state,</span><br><span class="line">        &#123;</span><br><span class="line">          text: action.text,</span><br><span class="line">          completed: <span class="literal">false</span></span><br><span class="line">        &#125;</span><br><span class="line">      ];</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">      <span class="keyword">return</span> state</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="编写-mapDispatchToProps-有哪些不同的方法"><a href="#编写-mapDispatchToProps-有哪些不同的方法" class="headerlink" title="编写 mapDispatchToProps() 有哪些不同的方法?"></a>编写 <code>mapDispatchToProps()</code> 有哪些不同的方法?</h3><p>有一些方法可以将<em>action creators</em>绑定到<code>mapDispatchToProps()</code>中的<code>dispatch()</code>。以下是可能的写法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mapDispatchToProps = <span class="function">(<span class="params">dispatch</span>) =&gt;</span> (&#123;</span><br><span class="line"> action: <span class="function"><span class="params">()</span> =&gt;</span> dispatch(action())</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mapDispatchToProps = <span class="function">(<span class="params">dispatch</span>) =&gt;</span> (&#123;</span><br><span class="line"> action: bindActionCreators(action, dispatch)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mapDispatchToProps = &#123; action &#125;</span><br></pre></td></tr></table></figure>
<p>第三种写法只是第一种写法的简写。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-mapStateToProps-和-mapDispatchToProps-中使用-ownProps-参数有什么用"><a href="#在-mapStateToProps-和-mapDispatchToProps-中使用-ownProps-参数有什么用" class="headerlink" title="在 mapStateToProps() 和 mapDispatchToProps() 中使用 ownProps 参数有什么用?"></a>在 <code>mapStateToProps()</code> 和 <code>mapDispatchToProps()</code> 中使用 <code>ownProps</code> 参数有什么用?</h3><p>如果指定了<code>ownProps</code>参数，React Redux 会将传递给该组件的 props 传递给你的<em>connect</em>函数。因此，如果您使用连接组件：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> ConnectedComponent <span class="keyword">from</span> <span class="string">'./containers/ConnectedComponent'</span>;</span><br><span class="line"></span><br><span class="line">&lt;ConnectedComponent user=&#123;<span class="string">'john'</span>&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p>你的<code>mapStateToProps()</code>和<code>mapDispatchToProps()</code>函数里面的<code>ownProps</code>将是一个对象：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123; <span class="attr">user</span>: <span class="string">'john'</span> &#125;</span><br></pre></td></tr></table></figure>
<p>您可以使用此对象来决定从这些函数返回的内容。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何构建-Redux-项目目录"><a href="#如何构建-Redux-项目目录" class="headerlink" title="如何构建 Redux 项目目录?"></a>如何构建 Redux 项目目录?</h3><p>大多数项目都有几个顶级目录，如下所示：</p>
<ol>
<li><strong>Components</strong>: 用于<em>dumb</em>组件，Redux 不必关心的组件。</li>
<li><strong>Containers</strong>: 用于连接到 Redux 的<em>smart</em>组件。</li>
<li><strong>Actions</strong>: 用于所有 Action 创建器，其中文件名对应于应用程序的一部分。</li>
<li><strong>Reducers</strong>: 用于所有 reducer，其中文件名对应于state key。</li>
<li><strong>Store</strong>: 用于 Store 初始化。</li>
</ol>
<p>这种结构适用于中小型项目。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-redux-saga"><a href="#什么是-redux-saga" class="headerlink" title="什么是 redux-saga?"></a>什么是 redux-saga?</h3><p><code>redux-saga</code>是一个库，旨在使 React/Redux 项目中的副作用（数据获取等异步操作和访问浏览器缓存等可能产生副作用的动作）更容易，更好。</p>
<p>这个包在 NPM 上有发布:</p>
<figure class="highlight console"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install --save redux-saga</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="redux-saga-的模型概念是什么"><a href="#redux-saga-的模型概念是什么" class="headerlink" title="redux-saga 的模型概念是什么?"></a>redux-saga 的模型概念是什么?</h3><p><em>Saga</em>就像你的项目中的一个单独的线程，它独自负责副作用。<code>redux-saga</code> 是一个 redux <em>中间件</em>，这意味着它可以在项目启动中使用正常的 Redux 操作，暂停和取消该线程，它可以访问完整的 Redux 应用程序状态，并且它也可以调度 Redux 操作。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-redux-saga-中-call-和-put-之间有什么区别"><a href="#在-redux-saga-中-call-和-put-之间有什么区别" class="headerlink" title="在 redux-saga 中 call() 和 put() 之间有什么区别?"></a>在 redux-saga 中 <code>call()</code> 和 <code>put()</code> 之间有什么区别?</h3><p><code>call()</code>和<code>put()</code>都是 Effect 创建函数。 <code>call()</code>函数用于创建 Effect 描述，指示中间件调用 promise。<code>put()</code>函数创建一个 Effect，指示中间件将一个 Action 分派给 Store。</p>
<p>让我们举例说明这些 Effect 如何用于获取特定用户数据。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">fetchUserSaga</span>(<span class="params">action</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.</span></span><br><span class="line">  <span class="comment">// Instructing middleware to call promise, it resolved value will be assigned to `userData` variable</span></span><br><span class="line">  <span class="keyword">const</span> userData = <span class="keyword">yield</span> call(api.fetchUser, action.userId)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Instructing middleware to dispatch corresponding action.</span></span><br><span class="line">  <span class="keyword">yield</span> put(&#123;</span><br><span class="line">    type: <span class="string">'FETCH_USER_SUCCESS'</span>,</span><br><span class="line">    userData</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Redux-Thunk"><a href="#什么是-Redux-Thunk" class="headerlink" title="什么是 Redux Thunk?"></a>什么是 Redux Thunk?</h3><p><em>Redux Thunk</em>中间件允许您编写返回函数而不是 Action 的创建者。 thunk 可用于延迟 Action 的发送，或仅在满足某个条件时发送。内部函数接收 Store 的方法<code>dispatch()</code>和<code>getState()</code>作为参数。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="redux-saga-和-redux-thunk-之间有什么区别"><a href="#redux-saga-和-redux-thunk-之间有什么区别" class="headerlink" title="redux-saga 和 redux-thunk 之间有什么区别?"></a><code>redux-saga</code> 和 <code>redux-thunk</code> 之间有什么区别?</h3><p><em>Redux Thunk</em>和<em>Redux Saga</em>都负责处理副作用。在大多数场景中，Thunk 使用<em>Promises</em>来处理它们，而 Saga 使用<em>Generators</em>。Thunk 易于使用，因为许多开发人员都熟悉 Promise，Sagas/Generators 功能更强大，但您需要学习它们。但是这两个中间件可以共存，所以你可以从 Thunks 开始，并在需要时引入 Sagas。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Redux-DevTools"><a href="#什么是-Redux-DevTools" class="headerlink" title="什么是 Redux DevTools?"></a>什么是 Redux DevTools?</h3><p><em>Redux DevTools</em>是 Redux 的实时编辑的时间旅行环境，具有热重新加载，Action 重放和可自定义的 UI。如果您不想安装 Redux DevTools 并将其集成到项目中，请考虑使用 Chrome 和 Firefox 的扩展插件。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Redux-DevTools-的功能有哪些"><a href="#Redux-DevTools-的功能有哪些" class="headerlink" title="Redux DevTools 的功能有哪些?"></a>Redux DevTools 的功能有哪些?</h3><ol>
<li>允许您检查每个状态和 action 负载。</li>
<li>让你可以通过<em>撤销</em>回到过去。</li>
<li>如果更改 reducer 代码，将重新评估每个<em>已暂存</em>的 Action。</li>
<li>如果 Reducers 抛出错误，你会看到这发生了什么 Action，以及错误是什么。</li>
<li>使用<code>persistState()</code>存储增强器，您可以在页面重新加载期间保持调试会话。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Redux-选择器以及使用它们的原因"><a href="#什么是-Redux-选择器以及使用它们的原因" class="headerlink" title="什么是 Redux 选择器以及使用它们的原因?"></a>什么是 Redux 选择器以及使用它们的原因?</h3><p><em>选择器</em>是将 Redux 状态作为参数并返回一些数据以传递给组件的函数。</p>
<p>例如，要从 state 中获取用户详细信息：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> getUserData = <span class="function"><span class="params">state</span> =&gt;</span> state.user.data</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Redux-Form"><a href="#什么是-Redux-Form" class="headerlink" title="什么是 Redux Form?"></a>什么是 Redux Form?</h3><p><em>Redux Form</em>与 React 和 Redux 一起使用，以使 React 中的表单能够使用 Redux 来存储其所有状态。Redux Form 可以与原始 HTML5 输入一起使用，但它也适用于常见的 UI 框架，如 Material UI，React Widgets和React Bootstrap。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Redux-Form-的主要功能有哪些"><a href="#Redux-Form-的主要功能有哪些" class="headerlink" title="Redux Form 的主要功能有哪些?"></a>Redux Form 的主要功能有哪些?</h3><ol>
<li>字段值通过 Redux 存储持久化。</li>
<li>验证（同步/异步）和提交。</li>
<li>字段值的格式化，解析和规范化。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何向-Redux-添加多个中间件"><a href="#如何向-Redux-添加多个中间件" class="headerlink" title="如何向 Redux 添加多个中间件?"></a>如何向 Redux 添加多个中间件?</h3><p>你可以使用<code>applyMiddleware()</code>。</p>
<p>例如，你可以添加<code>redux-thunk</code>和<code>logger</code>作为参数传递给<code>applyMiddleware()</code>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createStore, applyMiddleware &#125; <span class="keyword">from</span> <span class="string">'redux'</span></span><br><span class="line"><span class="keyword">const</span> createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-Redux-中设置初始状态"><a href="#如何在-Redux-中设置初始状态" class="headerlink" title="如何在 Redux 中设置初始状态?"></a>如何在 Redux 中设置初始状态?</h3><p>您需要将初始状态作为第二个参数传递给 createStore ：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> rootReducer = combineReducers(&#123;</span><br><span class="line">  todos: todos,</span><br><span class="line">  visibilityFilter: visibilityFilter</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> initialState = &#123;</span><br><span class="line">  todos: [&#123; <span class="attr">id</span>: <span class="number">123</span>, <span class="attr">name</span>: <span class="string">'example'</span>, <span class="attr">completed</span>: <span class="literal">false</span> &#125;]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = createStore(</span><br><span class="line">  rootReducer,</span><br><span class="line">  initialState</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Relay-与-Redux-有何不同"><a href="#Relay-与-Redux-有何不同" class="headerlink" title="Relay 与 Redux 有何不同?"></a>Relay 与 Redux 有何不同?</h3><p>Relay 与 Redux 类似，因为它们都使用单个 Store。主要区别在于 relay 仅管理源自服务器的状态，并且通过<em>GraphQL</em>查询（用于读取数据）和突变（用于更改数据）来使用对状态的所有访问。Relay 通过仅提取已更改的数据而为您缓存数据并优化数据提取。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<h2 id="React-Native"><a href="#React-Native" class="headerlink" title="React Native"></a>React Native</h2><ol start="188">
<li><h3 id="React-Native-和-React-有什么区别"><a href="#React-Native-和-React-有什么区别" class="headerlink" title="React Native 和 React 有什么区别?"></a>React Native 和 React 有什么区别?</h3><p><strong>React</strong>是一个 JavaScript 库，支持前端 Web 和在服务器上运行，用于构建用户界面和 Web 应用程序。</p>
<p><strong>React Native</strong>是一个移动端框架，可编译为本机应用程序组件，允许您使用 JavaScript 构建本机移动应用程序（iOS，Android和Windows），允许您使用 React 构建组件。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何测试-React-Native-应用程序"><a href="#如何测试-React-Native-应用程序" class="headerlink" title="如何测试 React Native 应用程序?"></a>如何测试 React Native 应用程序?</h3><p>React Native 只能在 iOS 和 Android 等移动模拟器中进行测试。您可以使用 expo app（<a href="https://expo.io" target="_blank" rel="noopener">https://expo.io</a>）在移动设备上运行该应用程序。如果使用 QR 代码进行同步，则您的移动设备和计算机应位于同一个无线网络中。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-Native-查看日志"><a href="#如何在-React-Native-查看日志" class="headerlink" title="如何在 React Native 查看日志?"></a>如何在 React Native 查看日志?</h3><p>您可以使用<code>console.log</code>，<code>console.warn</code>等。从 React Native v0.29 开始，您只需运行以下命令即可在控制台中查看日志：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ react-native log-ios</span><br><span class="line">$ react-native log-android</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="怎么调试-React-Native-应用"><a href="#怎么调试-React-Native-应用" class="headerlink" title="怎么调试 React Native 应用?"></a>怎么调试 React Native 应用?</h3><p>按照以下步骤调试 React Native 应用程序：</p>
<ol>
<li>在 iOS 模拟器中运行您的应用程序。</li>
<li>按<code>Command + D</code>，然后在网页中打开<code>http://localhost:8081/debugger-ui</code>。</li>
<li>启用<em>Pause On Caught Exceptions</em>以获得更好的调试体验。</li>
<li>按<code>Command + Option + I</code>打开 Chrome Developer 工具，或通过<code>View</code> -&gt;<code>Developer</code> -&gt;<code>Developer Tools</code>打开它。</li>
<li>您现在应该能够像平常那样进行调试。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<h2 id="React-supported-libraries-amp-Integration"><a href="#React-supported-libraries-amp-Integration" class="headerlink" title="React supported libraries &amp; Integration"></a>React supported libraries &amp; Integration</h2><ol start="192">
<li><h3 id="什么是-Reselect-以及它是如何工作的"><a href="#什么是-Reselect-以及它是如何工作的" class="headerlink" title="什么是 Reselect 以及它是如何工作的?"></a>什么是 Reselect 以及它是如何工作的?</h3><p><em>Reselect</em>是一个<strong>选择器库</strong>（用于 Redux ），它使用<em>memoization</em>概念。它最初编写用于计算类似 Redux 的应用程序状态的派生数据，但它不能绑定到任何体系结构或库。</p>
<p>Reselect 保留最后一次调用的最后输入/输出的副本，并仅在其中一个输入发生更改时重新计算结果。如果连续两次提供相同的输入，则 Reselect 将返回缓存的输出。它的 memoization 和缓存是完全可定制的。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Flow"><a href="#什么是-Flow" class="headerlink" title="什么是 Flow?"></a>什么是 Flow?</h3><p><em>Flow</em> 是一个静态类型检查器，旨在查找 JavaScript 中的类型错误。与传统类型系统相比，Flow 类型可以表达更细粒度的区别。例如，与大多数类型系统不同，Flow 能帮助你捕获涉及 <code>null</code> 的错误。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Flow-和-PropTypes-有什么区别"><a href="#Flow-和-PropTypes-有什么区别" class="headerlink" title="Flow 和 PropTypes 有什么区别?"></a>Flow 和 PropTypes 有什么区别?</h3><p>Flow 是一个静态分析工具（静态检查器），它使用该语言的超集，允许你在所有代码中添加类型注释，并在编译时捕获整个类的错误。PropTypes 是一个基本类型检查器（运行时检查器），已经被添加到 React 中。除了检查传递给给定组件的属性类型外，它不能检查其他任何内容。如果你希望对整个项目进行更灵活的类型检查，那么 Flow/TypeScript 是更合适的选择。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中如何使用-Font-Awesome-图标"><a href="#在-React-中如何使用-Font-Awesome-图标" class="headerlink" title="在 React 中如何使用 Font Awesome 图标?"></a>在 React 中如何使用 Font Awesome 图标?</h3><p>接下来的步骤将在 React 中引入 Font Awesome：</p>
<ol>
<li>安装 <code>font-awesome</code>:</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install --save font-awesome</span></span><br></pre></td></tr></table></figure>
<ol start="2">
<li>在 <code>index.js</code> 文件中导入 <code>font-awesome</code>:</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'font-awesome/css/font-awesome.min.css'</span></span><br></pre></td></tr></table></figure>
<ol start="3">
<li>在 <code>className</code> 中添加 Font Awesome 类:</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">className</span>=<span class="string">&#123;</span>'<span class="attr">fa</span> <span class="attr">fa-spinner</span>'&#125; /&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么-是-React-开发者工具"><a href="#什么-是-React-开发者工具" class="headerlink" title="什么 是 React 开发者工具?"></a>什么 是 React 开发者工具?</h3><p><em>React Developer Tools</em> 允许您检查组件层次结构，包括组件属性和状态。它既可以作为浏览器扩展（用于 Chrome 和 Firefox ），也可以作为独立的应用程序（用于其他环境，包括 Safari、IE 和 React Native）。</p>
<p>可用于不同浏览器或环境的官方扩展。</p>
<ol>
<li><strong>Chrome插件</strong></li>
<li><strong>Firefox插件</strong></li>
<li><strong>独立应用</strong> （ Safari，React Native 等）</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-Chrome-中为什么-DevTools-没有加载本地文件"><a href="#在-Chrome-中为什么-DevTools-没有加载本地文件" class="headerlink" title="在 Chrome 中为什么 DevTools 没有加载本地文件?"></a>在 Chrome 中为什么 DevTools 没有加载本地文件?</h3><p>如果您在浏览器中打开了本地 HTML 文件（<code>file://...</code>），则必须先打开<em>Chrome Extensions</em>并选中“允许访问文件URL”。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-中使用-Polymer"><a href="#如何在-React-中使用-Polymer" class="headerlink" title="如何在 React 中使用 Polymer?"></a>如何在 React 中使用 Polymer?</h3><ol>
<li><p>创建 Polymer 元素：</p>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=<span class="string">'import'</span> href=<span class="string">'../../bower_components/polymer/polymer.html'</span> /&gt;</span><br><span class="line">Polymer(&#123;</span><br><span class="line">  is: <span class="string">'calender-element'</span>,</span><br><span class="line">  ready: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.textContent = <span class="string">'I am a calender'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>通过在 HTML 文档中导入 Polymer 组件，来创建该组件对应的标签。例如，在 React 应用程序的 <code>index.html</code> 文件中导入。</p>
 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">'import'</span> <span class="attr">href</span>=<span class="string">'./src/polymer-components/calender-element.html'</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在 JSX 文件中使用该元素：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;calender-element /&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> MyComponent</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="与-Vue-js-相比，React-有哪些优势"><a href="#与-Vue-js-相比，React-有哪些优势" class="headerlink" title="与 Vue.js 相比，React 有哪些优势?"></a>与 Vue.js 相比，React 有哪些优势?</h3><p>与 Vue.js 相比，React 具有以下优势：</p>
<ol>
<li>在大型应用程序开发中提供更大的灵活性。</li>
<li>更容易测试。</li>
<li>更适合创建移动端应用程序。</li>
<li>提供更多的信息和解决方案。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-和-Angular-有什么区别"><a href="#React-和-Angular-有什么区别" class="headerlink" title="React 和 Angular 有什么区别?"></a>React 和 Angular 有什么区别?</h3><p>| React | Angular |<br>| —– | ——- |<br>| React 是一个库，只有View层 | Angular是一个框架，具有完整的 MVC 功能 |<br>| React 可以处理服务器端的渲染 | AngularJS 仅在客户端呈现，但 Angular 2 及更高版本可以在服务器端渲染 |<br>| React 在 JS 中使用看起来像 HTML 的 JSX，这可能令人困惑 | Angular 遵循 HTML 的模板方法，这使得代码更短且易于理解 |<br>| React Native 是一种 React 类型，它用于构建移动应用程序，它更快，更稳定 | Ionic，Angular 的移动 app 相对原生 app 来说不太稳定和慢 |<br>| 在 Reac t中，数据只以单一方向传递，因此调试很容易 | 在 Angular 中，数据以两种方式传递，即它在子节点和父节点之间具有双向数据绑定，因此调试通常很困难 |</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么-React-选项卡不会显示在-DevTools-中"><a href="#为什么-React-选项卡不会显示在-DevTools-中" class="headerlink" title="为什么 React 选项卡不会显示在 DevTools 中?"></a>为什么 React 选项卡不会显示在 DevTools 中?</h3><p>当页面加载时，<em>React DevTools</em>设置一个名为<code>__REACT_DEVTOOLS_GLOBAL_HOOK__</code>的全局变量，然后 React 在初始化期间与该钩子通信。如果网站没有使用 React，或者如果 React 无法与 DevTools 通信，那么它将不会显示该选项卡。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Styled-Components"><a href="#什么是-Styled-Components" class="headerlink" title="什么是 Styled Components?"></a>什么是 Styled Components?</h3><p>styled-components 是一个用于样式化 React 应用程序的 JavaScript 库。 它删除了样式和组件之间的映射，并允许您在 js 中编写 CSS。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="举一个-Styled-Components-的例子"><a href="#举一个-Styled-Components-的例子" class="headerlink" title="举一个 Styled Components 的例子?"></a>举一个 Styled Components 的例子?</h3><p>让我们创建具有特定样式的<code>&lt;Title&gt;</code>和<code>&lt;Wrapper&gt;</code>组件。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> styled <span class="keyword">from</span> <span class="string">'styled-components'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Create a &lt;Title&gt; component that renders an &lt;h1&gt; which is centered, red and sized at 1.5em</span></span><br><span class="line"><span class="keyword">const</span> Title = styled.h1<span class="string">`</span></span><br><span class="line"><span class="string">  font-size: 1.5em;</span></span><br><span class="line"><span class="string">  text-align: center;</span></span><br><span class="line"><span class="string">  color: palevioletred;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Create a &lt;Wrapper&gt; component that renders a &lt;section&gt; with some padding and a papayawhip background</span></span><br><span class="line"><span class="keyword">const</span> Wrapper = styled.section<span class="string">`</span></span><br><span class="line"><span class="string">  padding: 4em;</span></span><br><span class="line"><span class="string">  background: papayawhip;</span></span><br><span class="line"><span class="string">`</span></span><br></pre></td></tr></table></figure>
<p><code>Title</code>和<code>Wrapper</code>变量现在是可以像任何其他 react 组件一样渲染。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;Wrapper&gt;</span><br><span class="line">  &lt;Title&gt;&#123;<span class="string">'Lets start first styled component!'</span>&#125;&lt;<span class="regexp">/Title&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>Wrapper&gt;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Relay"><a href="#什么是-Relay" class="headerlink" title="什么是 Relay?"></a>什么是 Relay?</h3><p>Relay 是一个 JavaScript 框架，用于使用 React 视图层为 Web 应用程序提供数据层和客户端与服务器之间的通信。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-create-react-app-中使用-TypeScript"><a href="#如何在-create-react-app-中使用-TypeScript" class="headerlink" title="如何在 create-react-app 中使用 TypeScript?"></a>如何在 <code>create-react-app</code> 中使用 TypeScript?</h3><p>当您创建一个新项目带有<code>--scripts-version</code>选项值为<code>react-scripts-ts</code>时便可将 TypeScript 引入。</p>
<p>生成的项目结构如下所示：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">my-app/</span><br><span class="line">├─ .gitignore</span><br><span class="line">├─ images.d.ts</span><br><span class="line">├─ node_modules/</span><br><span class="line">├─ public/</span><br><span class="line">├─ src/</span><br><span class="line">│  └─ ...</span><br><span class="line">├─ package.json</span><br><span class="line">├─ tsconfig.json</span><br><span class="line">├─ tsconfig.prod.json</span><br><span class="line">├─ tsconfig.test.json</span><br><span class="line">└─ tslint.json</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
<h2 id="Miscellaneous"><a href="#Miscellaneous" class="headerlink" title="Miscellaneous"></a>Miscellaneous</h2><ol start="206">
<li><h3 id="Reselect-库的主要功能有哪些"><a href="#Reselect-库的主要功能有哪些" class="headerlink" title="Reselect 库的主要功能有哪些?"></a>Reselect 库的主要功能有哪些?</h3><ol>
<li>选择器可以计算派生数据，允许 Redux 存储最小可能状态。</li>
<li>选择器是有效的。除非其参数之一发生更改，否则不会重新计算选择器。</li>
<li>选择器是可组合的。它们可以用作其他选择器的输入。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="举一个-Reselect-用法的例子"><a href="#举一个-Reselect-用法的例子" class="headerlink" title="举一个 Reselect 用法的例子?"></a>举一个 Reselect 用法的例子?</h3><p>让我们通过使用 Reselect 来简化计算不同数量的装运订单：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createSelector &#125; <span class="keyword">from</span> <span class="string">'reselect'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> shopItemsSelector = <span class="function"><span class="params">state</span> =&gt;</span> state.shop.items</span><br><span class="line"><span class="keyword">const</span> taxPercentSelector = <span class="function"><span class="params">state</span> =&gt;</span> state.shop.taxPercent</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> subtotalSelector = createSelector(</span><br><span class="line">  shopItemsSelector,</span><br><span class="line">  items =&gt; items.reduce(<span class="function">(<span class="params">acc, item</span>) =&gt;</span> acc + item.value, <span class="number">0</span>)</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> taxSelector = createSelector(</span><br><span class="line">  subtotalSelector,</span><br><span class="line">  taxPercentSelector,</span><br><span class="line">  (subtotal, taxPercent) =&gt; subtotal * (taxPercent / <span class="number">100</span>)</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> totalSelector = createSelector(</span><br><span class="line">  subtotalSelector,</span><br><span class="line">  taxSelector,</span><br><span class="line">  (subtotal, tax) =&gt; (&#123; <span class="attr">total</span>: subtotal + tax &#125;)</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> exampleState = &#123;</span><br><span class="line">  shop: &#123;</span><br><span class="line">    taxPercent: <span class="number">8</span>,</span><br><span class="line">    items: [</span><br><span class="line">      &#123; <span class="attr">name</span>: <span class="string">'apple'</span>, <span class="attr">value</span>: <span class="number">1.20</span> &#125;,</span><br><span class="line">      &#123; <span class="attr">name</span>: <span class="string">'orange'</span>, <span class="attr">value</span>: <span class="number">0.95</span> &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(subtotalSelector(exampleState)) <span class="comment">// 2.15</span></span><br><span class="line"><span class="built_in">console</span>.log(taxSelector(exampleState))      <span class="comment">// 0.172</span></span><br><span class="line"><span class="built_in">console</span>.log(totalSelector(exampleState))    <span class="comment">// &#123; total: 2.322 &#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Redux-中的-Action-是什么"><a href="#Redux-中的-Action-是什么" class="headerlink" title="Redux 中的 Action 是什么?"></a>Redux 中的 Action 是什么?</h3><p><em>Actions</em>是纯 JavaScript 对象或信息的有效负载，可将数据从您的应用程序发送到您的 Store。 它们是 Store 唯一的数据来源。 Action 必须具有指示正在执行的操作类型的 type 属性。</p>
<p>例如，表示添加新待办事项的示例操作：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  type: ADD_TODO,</span><br><span class="line">  text: &apos;Add todo item&apos;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-React-中-statics-对象是否能与-ES6-类一起使用"><a href="#在-React-中-statics-对象是否能与-ES6-类一起使用" class="headerlink" title="在 React 中 statics 对象是否能与 ES6 类一起使用?"></a>在 React 中 statics 对象是否能与 ES6 类一起使用?</h3><p>不行，<code>statics</code> 仅适用于 <code>React.createClass()</code>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">someComponent= React.createClass(&#123;</span><br><span class="line">  statics: &#123;</span><br><span class="line">    someMethod: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">// ..</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>但是你可以在 ES6+ 的类中编写静态代码，如下所示：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Component</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> propTypes = &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> someMethod() &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Redux-只能与-React-一起使用么"><a href="#Redux-只能与-React-一起使用么" class="headerlink" title="Redux 只能与 React 一起使用么?"></a>Redux 只能与 React 一起使用么?</h3><p>Redux 可以用做任何 UI 层的数据存储。最常见的应用场景是 React 和 React Native，但也有一些 bindings 可用于 AngularJS，Angular 2，Vue，Mithril 等项目。Redux 只提供了一种订阅机制，任何其他代码都可以使用它。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="您是否需要使用特定的构建工具来使用-Redux"><a href="#您是否需要使用特定的构建工具来使用-Redux" class="headerlink" title="您是否需要使用特定的构建工具来使用 Redux ?"></a>您是否需要使用特定的构建工具来使用 Redux ?</h3><p>Redux 最初是用 ES6 编写的，用 Webpack 和 Babel 编译成 ES5。 无论您的 JavaScript 构建过程如何，您都应该能够使用它。Redux 还提供了一个 UMD 版本，可以直接使用而无需任何构建过程。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Redux-Form-的-initialValues-如何从状态更新"><a href="#Redux-Form-的-initialValues-如何从状态更新" class="headerlink" title="Redux Form 的 initialValues 如何从状态更新?"></a>Redux Form 的 <code>initialValues</code> 如何从状态更新?</h3><p>你需要添加<code>enableReinitialize：true</code>设置。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> InitializeFromStateForm = reduxForm(&#123;</span><br><span class="line">  form: <span class="string">'initializeFromState'</span>,</span><br><span class="line">  enableReinitialize : <span class="literal">true</span></span><br><span class="line">&#125;)(UserEdit)</span><br></pre></td></tr></table></figure>
<p>如果你的<code>initialValues</code>属性得到更新，你的表单也会更新。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-是如何为一个属性声明不同的类型"><a href="#React-是如何为一个属性声明不同的类型" class="headerlink" title="React 是如何为一个属性声明不同的类型?"></a>React 是如何为一个属性声明不同的类型?</h3><p>你可以使用 <code>PropTypes</code> 中的 <code>oneOfType()</code> 方法。</p>
<p>例如，如下所示 size 的属性值可以是 <code>string</code> 或 <code>number</code> 类型。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Component.PropTypes = &#123;</span><br><span class="line">  size: PropTypes.oneOfType([</span><br><span class="line">    PropTypes.string,</span><br><span class="line">    PropTypes.number</span><br><span class="line">  ])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="我可以导入一个-SVG-文件作为-React-组件么"><a href="#我可以导入一个-SVG-文件作为-React-组件么" class="headerlink" title="我可以导入一个 SVG 文件作为 React 组件么?"></a>我可以导入一个 SVG 文件作为 React 组件么?</h3><p>你可以直接将 SVG 作为组件导入，而不是将其作为文件加载。此功能仅在 <a href="mailto:`react-scripts@2.0.0" target="_blank" rel="noopener">`react-scripts@2.0.0</a>` 及更高版本中可用。</p>
</li>
</ol>
<pre><code><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ReactComponent <span class="keyword">as</span> Logo &#125; <span class="keyword">from</span> <span class="string">'./logo.svg'</span></span><br><span class="line">    </span><br><span class="line"><span class="keyword">const</span> App = <span class="function"><span class="params">()</span> =&gt;</span> (</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &#123;<span class="comment">/* Logo is an actual react component */</span>&#125;</span><br><span class="line">    &lt;Logo /&gt;</span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">)</span></span><br></pre></td></tr></table></figure>


**[⬆ 返回顶部](#目录)**
</code></pre><ol start="215">
<li><h3 id="为什么不建议使用内联引用回调或函数"><a href="#为什么不建议使用内联引用回调或函数" class="headerlink" title="为什么不建议使用内联引用回调或函数?"></a>为什么不建议使用内联引用回调或函数?</h3><p>如果将 ref 回调定义为内联函数，则在更新期间它将会被调用两次。首先使用 null 值，然后再使用 DOM 元素。这是因为每次渲染的时候都会创建一个新的函数实例，因此 React 必须清除旧的 ref 并设置新的 ref。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">UserForm</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  handleSubmit = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"Input Value is: "</span>, <span class="keyword">this</span>.input.value)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render () &#123;</span><br><span class="line">   <span class="keyword">return</span> (</span><br><span class="line">     &lt;form onSubmit=&#123;<span class="keyword">this</span>.handleSubmit&#125;&gt;</span><br><span class="line">       &lt;input</span><br><span class="line">         type=<span class="string">'text'</span></span><br><span class="line">         ref=&#123;(input) =&gt; <span class="keyword">this</span>.input = input&#125; /&gt; <span class="comment">// Access DOM input in handle submit</span></span><br><span class="line">       &lt;button type=<span class="string">'submit'</span>&gt;Submit&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">     &lt;/</span>form&gt;</span><br><span class="line">   )</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<pre><code>但我们期望的是当组件挂载时，ref 回调只会被调用一次。一个快速修复的方法是使用 ES7 类属性语法定义函数。

<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">UserForm</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line"> handleSubmit = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">   <span class="built_in">console</span>.log(<span class="string">"Input Value is: "</span>, <span class="keyword">this</span>.input.value)</span><br><span class="line"> &#125;</span><br><span class="line">    </span><br><span class="line"> setSearchInput = <span class="function">(<span class="params">input</span>) =&gt;</span> &#123;</span><br><span class="line">   <span class="keyword">this</span>.input = input</span><br><span class="line"> &#125;</span><br><span class="line">    </span><br><span class="line"> render () &#123;</span><br><span class="line">   <span class="keyword">return</span> (</span><br><span class="line">     &lt;form onSubmit=&#123;<span class="keyword">this</span>.handleSubmit&#125;&gt;</span><br><span class="line">       &lt;input</span><br><span class="line">         type=<span class="string">'text'</span></span><br><span class="line">         ref=&#123;<span class="keyword">this</span>.setSearchInput&#125; /&gt; <span class="comment">// Access DOM input in handle submit</span></span><br><span class="line">       &lt;button type=<span class="string">'submit'</span>&gt;Submit&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">     &lt;/</span>form&gt;</span><br><span class="line">   )</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

**[⬆ 返回顶部](#目录)**
</code></pre><ol start="216">
<li><h3 id="在-React-中什么是渲染劫持"><a href="#在-React-中什么是渲染劫持" class="headerlink" title="在 React 中什么是渲染劫持?"></a>在 React 中什么是渲染劫持?</h3><p>渲染劫持的概念是控制一个组件将从另一个组件输出什么的能力。实际上，这意味着你可以通过将组件包装成高阶组件来装饰组件。通过包装，你可以注入额外的属性或产生其他变化，这可能会导致渲染逻辑的更改。实际上它不支持劫持，但通过使用 HOC，你可以使组件以不同的方式工作。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-HOC-工厂实现"><a href="#什么是-HOC-工厂实现" class="headerlink" title="什么是 HOC 工厂实现?"></a>什么是 HOC 工厂实现?</h3><p>在 React 中实现 HOC 有两种主要方式。 1.属性代理（PP）和 2.继承倒置（II）。他们遵循不同的方法来操纵<em>WrappedComponent</em>。</p>
<p><strong>属性代理</strong><br>在这种方法中，HOC 的 render 方法返回 WrappedComponent 类型的 React 元素。我们通过 HOC 收到 props，因此定义为<strong>属性代理</strong>。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ppHOC</span>(<span class="params">WrappedComponent</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="class"><span class="keyword">class</span> <span class="title">PP</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">   render() &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">WrappedComponent</span> &#123;<span class="attr">...this.props</span>&#125;/&gt;</span></span></span><br><span class="line"><span class="xml">   &#125;</span></span><br><span class="line"><span class="xml"> &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong>继承倒置</strong><br>在这种方法中，返回的 HOC 类（Enhancer）扩展了 WrappedComponent 。它被称为继承反转，因为它不是扩展一些 Enhancer 类的 WrappedComponent，而是由 Enhancer 被动扩展。 通过这种方式，它们之间的关系似乎是<strong>逆的</strong>。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">iiHOC</span>(<span class="params">WrappedComponent</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="class"><span class="keyword">class</span> <span class="title">Enhancer</span> <span class="keyword">extends</span> <span class="title">WrappedComponent</span> </span>&#123;</span><br><span class="line">   render() &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="keyword">super</span>.render()</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何传递数字给-React-组件"><a href="#如何传递数字给-React-组件" class="headerlink" title="如何传递数字给 React 组件?"></a>如何传递数字给 React 组件?</h3><p>传递数字时你应该使用 <code>{}</code>，而传递字符串时还需要使用引号：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">React.render(<span class="xml"><span class="tag">&lt;<span class="name">User</span> <span class="attr">age</span>=<span class="string">&#123;30&#125;</span> <span class="attr">department</span>=<span class="string">&#123;</span>"<span class="attr">IT</span>"&#125; /&gt;</span>, document.getElementById('container'));</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="我需要将所有状态保存到-Redux-中吗？我应该使用-react-的内部状态吗"><a href="#我需要将所有状态保存到-Redux-中吗？我应该使用-react-的内部状态吗" class="headerlink" title="我需要将所有状态保存到 Redux 中吗？我应该使用 react 的内部状态吗?"></a>我需要将所有状态保存到 Redux 中吗？我应该使用 react 的内部状态吗?</h3><p>这取决于开发者的决定。即开发人员的工作是确定应用程序的哪种状态，以及每个状态应该存在的位置，有些用户喜欢将每一个数据保存在 Redux 中，以维护其应用程序的完全可序列化和受控。其他人更喜欢在组件的内部状态内保持非关键或UI状态，例如“此下拉列表当前是否打开”。</p>
<p>以下是确定应将哪种数据放入Redux的主要规则：</p>
<ol>
<li>应用程序的其他部分是否关心此数据？</li>
<li>您是否需要能够基于此原始数据创建更多派生数据？</li>
<li>是否使用相同的数据来驱动多个组件？</li>
<li>能够将此状态恢复到给定时间点（即时间旅行调试）是否对您有价值？</li>
<li>您是否要缓存数据（即，如果已经存在，则使用处于状态的状态而不是重新请求它）？</li>
</ol>
</li>
<li><h3 id="在-React-中-registerServiceWorker-的用途是什么"><a href="#在-React-中-registerServiceWorker-的用途是什么" class="headerlink" title="在 React 中 registerServiceWorker 的用途是什么?"></a>在 React 中 registerServiceWorker 的用途是什么?</h3><p>默认情况下，React 会为你创建一个没有任何配置的 service worker。Service worker 是一个 Web API，它帮助你缓存资源和其他文件，以便当用户离线或在弱网络时，他/她仍然可以在屏幕上看到结果，因此，它可以帮助你建立更好的用户体验，这是你目前应该了解的关于 Service worker 的内容。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> ReactDOM <span class="keyword">from</span> <span class="string">'react-dom'</span>;</span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App'</span>;</span><br><span class="line"><span class="keyword">import</span> registerServiceWorker <span class="keyword">from</span> <span class="string">'./registerServiceWorker'</span>;</span><br><span class="line"></span><br><span class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">App</span> /&gt;</span>, document.getElementById('root'));</span></span><br><span class="line"><span class="xml">registerServiceWorker();</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-memo-函数是什么"><a href="#React-memo-函数是什么" class="headerlink" title="React memo 函数是什么?"></a>React memo 函数是什么?</h3><p>当类组件的输入属性相同时，可以使用 <strong>pureComponent</strong> 或 <strong>shouldComponentUpdate</strong> 来避免组件的渲染。现在，你可以通过把函数组件包装在 <strong>React.memo</strong> 中来实现相同的功能。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> MyComponent = React.memo(<span class="function"><span class="keyword">function</span> <span class="title">MyComponent</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line"> <span class="comment">/* only rerenders if props change */</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-lazy-函数是什么"><a href="#React-lazy-函数是什么" class="headerlink" title="React lazy 函数是什么?"></a>React lazy 函数是什么?</h3><p>使用 React.lazy 函数允许你将动态导入的组件作为常规组件进行渲染。当组件开始渲染时，它会自动加载包含 OtherComponent 的包。它必须返回一个 Promise，该 Promise 解析后为一个带有默认导出 React 组件的模块。</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> OtherComponent = React.lazy(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'./OtherComponent'</span>));</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyComponent</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line">   &lt;div&gt;</span><br><span class="line">     &lt;OtherComponent /&gt;</span><br><span class="line">   &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"> );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> React.lazy 和 Suspense 还不能用于服务端渲染。如果要在服务端渲染的应用程序中进行代码拆分，我们仍然建议使用 React Loadable。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何使用-setState-防止不必要的更新"><a href="#如何使用-setState-防止不必要的更新" class="headerlink" title="如何使用 setState 防止不必要的更新?"></a>如何使用 setState 防止不必要的更新?</h3><p>你可以把状态的当前值与已有的值进行比较，并决定是否重新渲染页面。如果没有更改，你需要返回 <code>null</code> 以阻止渲染，否则返回最新的状态值。例如，用户配置信息组件将按以下方式实现条件渲染：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">getUserProfile = <span class="function"><span class="params">user</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> latestAddress = user.address;</span><br><span class="line">  <span class="keyword">this</span>.setState(<span class="function"><span class="params">state</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (state.address === latestAddress) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123; <span class="attr">title</span>: latestAddress &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-16-版本中渲染数组、字符串和数值"><a href="#如何在-React-16-版本中渲染数组、字符串和数值" class="headerlink" title="如何在 React 16 版本中渲染数组、字符串和数值?"></a>如何在 React 16 版本中渲染数组、字符串和数值?</h3><p><strong>Arrays</strong>: 与旧版本不同的是，在 React 16 中你不需要确保 <strong>render</strong> 方法必须返回单个元素。通过返回数组，你可以返回多个没有包装元素的同级元素。例如，让我们看看下面的开发人员列表：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> ReactJSDevs = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> [</span><br><span class="line">    &lt;li key=<span class="string">"1"</span>&gt;John&lt;<span class="regexp">/li&gt;,</span></span><br><span class="line"><span class="regexp">    &lt;li key="2"&gt;Jackie&lt;/</span>li&gt;,</span><br><span class="line">    &lt;li key=<span class="string">"3"</span>&gt;Jordan&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  ];</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p>你还可以将此数组项合并到另一个数组组件中：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> JSDevs = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;li&gt;Brad&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">      &lt;li&gt;Brodge&lt;/</span>li&gt;</span><br><span class="line">      &lt;ReactJSDevs/&gt;</span><br><span class="line">      &lt;li&gt;Brandon&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/u</span>l&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>Strings and Numbers:</strong> 在 render 方法中，你也可以返回字符串和数值类型：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// String</span></span><br><span class="line">render() &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'Welcome to ReactJS questions'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Number</span></span><br><span class="line">render() &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="number">2018</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-React-类中使用类字段声明语法"><a href="#如何在-React-类中使用类字段声明语法" class="headerlink" title="如何在 React 类中使用类字段声明语法?"></a>如何在 React 类中使用类字段声明语法?</h3><p>使用类字段声明可以使 React 类组件更加简洁。你可以在不使用构造函数的情况下初始化本地状态，并通过使用箭头函数声明类方法，而无需额外对它们进行绑定。让我们以一个 counter 示例来演示类字段声明，即不使用构造函数初始化状态且不进行方法绑定：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Counter</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  state = &#123; <span class="attr">value</span>: <span class="number">0</span> &#125;;</span><br><span class="line"></span><br><span class="line">  handleIncrement = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">this</span>.setState(<span class="function"><span class="params">prevState</span> =&gt;</span> (&#123;</span><br><span class="line">      value: prevState.value + <span class="number">1</span></span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  handleDecrement = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">this</span>.setState(<span class="function"><span class="params">prevState</span> =&gt;</span> (&#123;</span><br><span class="line">      value: prevState.value - <span class="number">1</span></span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &#123;<span class="keyword">this</span>.state.value&#125;</span><br><span class="line"></span><br><span class="line">        &lt;button onClick=&#123;<span class="keyword">this</span>.handleIncrement&#125;&gt;+<span class="xml"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">        &lt;button onClick=&#123;<span class="keyword">this</span>.handleDecrement&#125;&gt;-<span class="xml"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    )</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-hooks"><a href="#什么是-hooks" class="headerlink" title="什么是 hooks?"></a>什么是 hooks?</h3><p>Hooks 是一个新的草案，它允许你在不编写类的情况下使用状态和其他 React 特性。让我们来看一个 useState 钩子示例：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useState &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Example</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// Declare a new state variable, which we'll call "count"</span></span><br><span class="line">  <span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;p&gt;You clicked &#123;count&#125; times&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">      &lt;button onClick=&#123;() =&gt; setCount(count + 1)&#125;&gt;</span></span><br><span class="line"><span class="regexp">        Click me</span></span><br><span class="line"><span class="regexp">      &lt;/</span>button&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p> 阅读资源：</p>
<ol>
<li><p><a href="https://juejin.im/post/5be3ea136fb9a049f9121014" target="_blank" rel="noopener">掘金 - 30分钟精通React Hooks</a></p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>
</li>
<li><h3 id="Hooks-需要遵循什么规则"><a href="#Hooks-需要遵循什么规则" class="headerlink" title="Hooks 需要遵循什么规则?"></a>Hooks 需要遵循什么规则?</h3><p>为了使用 hooks，你需要遵守两个规则：</p>
<ol>
<li>仅在顶层的 React 函数调用 hooks。也就是说，你不能在循环、条件或内嵌函数中调用 hooks。这将确保每次组件渲染时都以相同的顺序调用 hooks，并且它会在多个 useState 和 useEffect 调用之间保留 hooks 的状态。</li>
<li>仅在 React 函数中调用 hooks。例如，你不能在常规的 JavaScript 函数中调用 hooks。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何确保钩子遵循正确的使用规则"><a href="#如何确保钩子遵循正确的使用规则" class="headerlink" title="如何确保钩子遵循正确的使用规则?"></a>如何确保钩子遵循正确的使用规则?</h3><p>React 团队发布了一个名为<strong>eslint-plugin-react-hooks</strong>的 ESLint 插件，它实施了这两个规则。您可以使用以下命令将此插件添加到项目中，</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install eslint-plugin-react-hooks@next</span><br></pre></td></tr></table></figure>
<p>并在您的 ESLint 配置文件中应用以下配置：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Your ESLint configuration</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">"plugins"</span>: [</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    <span class="string">"react-hooks"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="string">"rules"</span>: &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    <span class="string">"react-hooks/rules-of-hooks"</span>: <span class="string">"error"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 此插件在 Create React App 已经默认配置。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Flux-和-Redux-之间有什么区别"><a href="#Flux-和-Redux-之间有什么区别" class="headerlink" title="Flux 和 Redux 之间有什么区别?"></a>Flux 和 Redux 之间有什么区别?</h3><p>以下是 Flux 和 Redux 之间的主要区别</p>
<p>| Flux | Redux |<br>| —– | ——- |<br>| 状态是可变的 | 状态是不可变的 |<br>| Store 包含状态和更改逻辑 | 存储和更改逻辑是分开的 |<br>| 存在多个 Store | 仅存在一个 Store |<br>| 所有的 Store 都是断开连接的 | 带有分层 reducers 的 Store |<br>| 它有一个单独的 dispatcher | 没有 dispatcher 的概念 |<br>| React 组件监测 Store | 容器组件使用连接函数 |</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-Router-V4-有什么好处"><a href="#React-Router-V4-有什么好处" class="headerlink" title="React Router V4 有什么好处?"></a>React Router V4 有什么好处?</h3><p>以下是 React Router V4 模块的主要优点：</p>
<ol>
<li>在React Router v4（版本4）中，API完全与组件有关。路由器可以显示为单个组件（<browserrouter>），它包装特定的子路由器组件（<route>）。</route></browserrouter></li>
<li>您无需手动设置历史记录。路由器模块将通过使用<browserrouter>组件包装路由来处理历史记录。</browserrouter></li>
<li>通过仅添加特定路由器模块（Web，core 或 native）来减少应用大小。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="您能描述一下-componentDidCatch-生命周期方法签名吗"><a href="#您能描述一下-componentDidCatch-生命周期方法签名吗" class="headerlink" title="您能描述一下 componentDidCatch 生命周期方法签名吗?"></a>您能描述一下 componentDidCatch 生命周期方法签名吗?</h3><p>在后代层级的组件抛出错误后，将调用<strong>componentDidCatch</strong>生命周期方法。该方法接收两个参数：</p>
<ol>
<li>error: - 抛出的错误对象</li>
<li>info: - 具有 componentStack 键的对象，包含有关哪个组件引发错误的信息。</li>
</ol>
<p>方法结构如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">componentDidCatch(error, info)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在哪些情况下，错误边界不会捕获错误"><a href="#在哪些情况下，错误边界不会捕获错误" class="headerlink" title="在哪些情况下，错误边界不会捕获错误?"></a>在哪些情况下，错误边界不会捕获错误?</h3><p>以下是错误边界不起作用的情况：</p>
<ol>
<li>在事件处理器内。</li>
<li><strong>setTimeout</strong> 或 <strong>requestAnimationFrame</strong> 回调中的异步代码。</li>
<li>在服务端渲染期间。</li>
<li>错误边界代码本身中引发错误时。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么事件处理器不需要错误边界"><a href="#为什么事件处理器不需要错误边界" class="headerlink" title="为什么事件处理器不需要错误边界?"></a>为什么事件处理器不需要错误边界?</h3><p>错误边界不会捕获事件处理程序中的错误。与 render 方法或生命周期方法不同，在渲染期间事件处理器不会被执行或调用。</p>
<p>如果仍然需要在事件处理程序中捕获错误，请使用下面的常规 JavaScript <code>try/catch</code> 语句：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props);</span><br><span class="line">    <span class="keyword">this</span>.state = &#123; <span class="attr">error</span>: <span class="literal">null</span> &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  handleClick = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="comment">// Do something that could throw</span></span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="keyword">this</span>.setState(&#123; error &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.state.error) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Caught an error.<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">onClick</span>=<span class="string">&#123;this.handleClick&#125;</span>&gt;</span>Click Me<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面的代码使用普通的 JavaScript try/catch 块而不是错误边界来捕获错误。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="try-catch-与错误边界有什么区别"><a href="#try-catch-与错误边界有什么区别" class="headerlink" title="try catch 与错误边界有什么区别?"></a>try catch 与错误边界有什么区别?</h3><p>Try catch 块使用命令式代码，而错误边界则是使用在屏幕上呈现声明性代码。</p>
<p>例如，以下是使用声明式代码的 try/catch 块：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  showButton();</span><br><span class="line">&#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>而错误边界包装的声明式代码如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ErrorBoundary&gt;</span><br><span class="line">  &lt;MyComponent /&gt;</span><br><span class="line">&lt;<span class="regexp">/ErrorBoundary&gt;</span></span><br></pre></td></tr></table></figure>
<p>因此，如果在组件树深处某个位置组件的 <strong>componentDidUpdate</strong> 方法中，发生了由 <strong>setState</strong> 引发的错误，它仍然会正确地冒泡到最近的错误边界。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-16-中未捕获的错误的行为是什么"><a href="#React-16-中未捕获的错误的行为是什么" class="headerlink" title="React 16 中未捕获的错误的行为是什么?"></a>React 16 中未捕获的错误的行为是什么?</h3><p>在 React 16 中，未被任何错误边界捕获的错误将导致整个 React 组件树的卸载。这一决定背后的原因是，与其显示已损坏的界面，不如完全移除它。例如，对于支付应用程序来说，显示错误的金额比什么都不提供更糟糕。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="放置错误边界的正确位置是什么"><a href="#放置错误边界的正确位置是什么" class="headerlink" title="放置错误边界的正确位置是什么?"></a>放置错误边界的正确位置是什么?</h3><p>错误边界使用的粒度由开发人员根据项目需要决定。你可以遵循这些方法中的任何一种：</p>
<ol>
<li>可以包装顶层路由组件以显示整个应用程序中常见的错误消息。</li>
<li>你还可以将单个组件包装在错误边界中，以防止它们奔溃时影响到应用程序的其余部分。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="从错误边界跟踪组件堆栈有什么好处"><a href="#从错误边界跟踪组件堆栈有什么好处" class="headerlink" title="从错误边界跟踪组件堆栈有什么好处?"></a>从错误边界跟踪组件堆栈有什么好处?</h3><p>除了错误消息和 JavaScript 堆栈，React 16 将使用错误边界的概念显示带有文件名和行号的组件堆栈。例如，BuggyCounter 组件显示组件堆栈信息：</p>
<p><img src="images/error_boundary.png" alt="stacktrace"></p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在定义类组件时，什么是必须的方法"><a href="#在定义类组件时，什么是必须的方法" class="headerlink" title="在定义类组件时，什么是必须的方法?"></a>在定义类组件时，什么是必须的方法?</h3><p>在类组件中 render() 方法是唯一需要的方法。也就是说，对于类组件，除了 render() 方法之外的所有方法都是可选的。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="render-方法可能返回的类型是什么"><a href="#render-方法可能返回的类型是什么" class="headerlink" title="render 方法可能返回的类型是什么?"></a>render 方法可能返回的类型是什么?</h3><p>以下列表是 render 方法返回的类型：</p>
<ol>
<li><strong>React elements:</strong> 用于告诉 React 如何渲染 DOM 节点。它包括 HTML 元素，如 <code>&lt;div /&gt;</code> 和用户定义的元素。</li>
<li><strong>Arrays and fragments:</strong> 以数组的形式返回多个元素和包装多个元素的片段。</li>
<li><strong>Portals:</strong> 将子元素渲染到不同的 DOM 子树中。</li>
<li><strong>String and numbers:</strong> 在 DOM 中将字符串和数字都作为文本节点进行呈现。</li>
<li><strong>Booleans or null:</strong> 不会渲染任何内容，但这些类型用于有条件地渲染内容。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="构造函数的主要目的是什么"><a href="#构造函数的主要目的是什么" class="headerlink" title="构造函数的主要目的是什么?"></a>构造函数的主要目的是什么?</h3><p>使用构造函数主要有两个目的：</p>
<ol>
<li>通过将对象分配给 this.state 来初始化本地状态。</li>
<li>用于为组件实例绑定事件处理方法。</li>
</ol>
<p>例如，下面的代码涵盖了上述两种情况：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">  <span class="keyword">super</span>(props);</span><br><span class="line">  <span class="comment">// Don't call this.setState() here!</span></span><br><span class="line">  <span class="keyword">this</span>.state = &#123; <span class="attr">counter</span>: <span class="number">0</span> &#125;;</span><br><span class="line">  <span class="keyword">this</span>.handleClick = <span class="keyword">this</span>.handleClick.bind(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="是否必须为-React-组件定义构造函数"><a href="#是否必须为-React-组件定义构造函数" class="headerlink" title="是否必须为 React 组件定义构造函数?"></a>是否必须为 React 组件定义构造函数?</h3><p>不，这不是强制的。也就是说，如果你不需要初始化状态且不需要绑定方法，则你不需要为 React 组件实现一个构造函数。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是默认属性"><a href="#什么是默认属性" class="headerlink" title="什么是默认属性?"></a>什么是默认属性?</h3><p>defaultProps 被定义为组件类上的属性，用于设置组件类默认的属性值。它只适用于 undefined 的属性，而不适用于 null 属性。例如，让我们为按钮组件创建默认的 color 属性：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyButton</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyButton.defaultProps = &#123;</span><br><span class="line">  color: <span class="string">'red'</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>如果未设置 props.color，则会使用默认值 <code>red</code>。 也就是说，每当你试图访问 color 属性时，它都使用默认值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">   <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">MyButton</span> /&gt;</span> ; // props.color will be set to red</span></span><br><span class="line"><span class="xml"> &#125;</span></span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 如果你提供的是 null 值，它会仍然保留 null 值。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么不能在-componentWillUnmount-中调用-setState-方法"><a href="#为什么不能在-componentWillUnmount-中调用-setState-方法" class="headerlink" title="为什么不能在 componentWillUnmount 中调用 setState() 方法?"></a>为什么不能在 componentWillUnmount 中调用 setState() 方法?</h3><p>不应在 componentWillUnmount() 中调用 setState()，因为一旦卸载了组件实例，就永远不会再次装载它。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="getDerivedStateFromError-的目的是什么"><a href="#getDerivedStateFromError-的目的是什么" class="headerlink" title="getDerivedStateFromError 的目的是什么?"></a>getDerivedStateFromError 的目的是什么?</h3><p>在子代组件抛出异常后会调用此生命周期方法。它以抛出的异常对象作为参数，并返回一个值用于更新状态。该生命周期方法的签名如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">static</span> getDerivedStateFromError(error)</span><br></pre></td></tr></table></figure>
<p>让我们举一个包含上述生命周期方法的错误边界示例，来说明 getDerivedStateFromError 的目的：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">ErrorBoundary</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props);</span><br><span class="line">    <span class="keyword">this</span>.state = &#123; <span class="attr">hasError</span>: <span class="literal">false</span> &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">static</span> getDerivedStateFromError(error) &#123;</span><br><span class="line">    <span class="comment">// Update state so the next render will show the fallback UI.</span></span><br><span class="line">    <span class="keyword">return</span> &#123; <span class="attr">hasError</span>: <span class="literal">true</span> &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.state.hasError) &#123;</span><br><span class="line">      <span class="comment">// You can render any custom fallback UI</span></span><br><span class="line">      <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Something went wrong.<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.props.children;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="当组件重新渲染时顺序执行的方法有哪些"><a href="#当组件重新渲染时顺序执行的方法有哪些" class="headerlink" title="当组件重新渲染时顺序执行的方法有哪些?"></a>当组件重新渲染时顺序执行的方法有哪些?</h3><p>更新可能由属性或状态的更改引起。在重新渲染组件时，会按以下顺序调用下列方法。</p>
<ol>
<li>static getDerivedStateFromProps()</li>
<li>shouldComponentUpdate()</li>
<li>render()</li>
<li>getSnapshotBeforeUpdate()</li>
<li>componentDidUpdate()</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="错误处理期间调用哪些方法"><a href="#错误处理期间调用哪些方法" class="headerlink" title="错误处理期间调用哪些方法?"></a>错误处理期间调用哪些方法?</h3><p>在渲染期间，生命周期方法内或任何子组件的构造函数中出现错误时，将会调用以下方法：</p>
<ol>
<li>static getDerivedStateFromError()</li>
<li>componentDidCatch()</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="displayName-类属性的用途是什么"><a href="#displayName-类属性的用途是什么" class="headerlink" title="displayName 类属性的用途是什么?"></a>displayName 类属性的用途是什么?</h3><p>displayName 被用于调试信息。通常，你不需要显式设置它，因为它是从定义组件的函数或类的名称推断出来的。如果出于调试目的或在创建高阶组件时显示不同的名称，可能需要显式设置它。</p>
<p>例如，若要简化调试，请选择一个显示名称，以表明它是 withSubscription HOC 的结果。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">withSubscription</span>(<span class="params">WrappedComponent</span>) </span>&#123;</span><br><span class="line">  <span class="class"><span class="keyword">class</span> <span class="title">WithSubscription</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;<span class="comment">/* ... */</span>&#125;</span><br><span class="line">  WithSubscription.displayName = <span class="string">`WithSubscription(<span class="subst">$&#123;getDisplayName(WrappedComponent)&#125;</span>)`</span>;</span><br><span class="line">  <span class="keyword">return</span> WithSubscription;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getDisplayName</span>(<span class="params">WrappedComponent</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> WrappedComponent.displayName || WrappedComponent.name || <span class="string">'Component'</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="支持-React-应用程序的浏览器有哪一些"><a href="#支持-React-应用程序的浏览器有哪一些" class="headerlink" title="支持 React 应用程序的浏览器有哪一些?"></a>支持 React 应用程序的浏览器有哪一些?</h3><p>React 支持所有流行的浏览器，包括 Internet Explorer 9 和更高版本，但旧版本的浏览器（如IE 9 和 IE 10）需要一些 polyfill。如果你使用 <strong>es5-shim and es5-sham</strong> polyfill，那么它甚至支持不支持 ES5 方法的旧浏览器。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="unmountComponentAtNode-方法的目的是什么"><a href="#unmountComponentAtNode-方法的目的是什么" class="headerlink" title="unmountComponentAtNode 方法的目的是什么?"></a>unmountComponentAtNode 方法的目的是什么?</h3><p>此方法可从 react-dom 包中获得，它从 DOM 中移除已装载的 React 组件，并清除其事件处理程序和状态。如果容器中没有装载任何组件，则调用此函数将不起任何作用。如果组件已卸载，则返回 true；如果没有要卸载的组件，则返回 false。该方法的签名如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ReactDOM.unmountComponentAtNode(container)</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是代码拆分"><a href="#什么是代码拆分" class="headerlink" title="什么是代码拆分?"></a>什么是代码拆分?</h3><p>Code-Splitting 是 Webpack 和 Browserify 等打包工具所支持的一项功能，它可以创建多个 bundles，并可以在运行时动态加载。React 项目支持通过 dynamic import() 特性进行代码拆分。例如，在下面的代码片段中，它将使 moduleA.js 及其所有唯一依赖项作为单独的块，仅当用户点击 ‘Load’ 按钮后才加载。</p>
<p><strong>moduleA.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> moduleA = <span class="string">'Hello'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123; moduleA &#125;;</span><br></pre></td></tr></table></figure>
<p><strong>App.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  handleClick = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">import</span>(<span class="string">'./moduleA'</span>)</span><br><span class="line">      .then(<span class="function">(<span class="params">&#123; moduleA &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// Use moduleA</span></span><br><span class="line">      &#125;)</span><br><span class="line">      .catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// Handle failure</span></span><br><span class="line">      &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;button onClick=&#123;<span class="keyword">this</span>.handleClick&#125;&gt;Load&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>div&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="严格模式有什么好处"><a href="#严格模式有什么好处" class="headerlink" title="严格模式有什么好处?"></a>严格模式有什么好处?</h3><p>在下面的情况下，<strictmode> 将有所帮助：</strictmode></p>
<ol>
<li>使用 <strong>unsafe lifecycle methods</strong> 标识组件。</li>
<li>有关 <strong>legacy string ref</strong> API 用法发出警告。</li>
<li>检测无法预测的 <strong>side effects</strong>。</li>
<li>检测 <strong>legacy context</strong> API。</li>
<li>有关已弃用的 findDOMNode 用法的警告。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-Keyed-Fragments"><a href="#什么是-Keyed-Fragments" class="headerlink" title="什么是 Keyed Fragments ?"></a>什么是 Keyed Fragments ?</h3><p>使用显式 &lt;React.Fragment&gt; 语法声明的片段可能具有 key 。一般用例是将集合映射到片段数组，如下所示，</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Glossary</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;dl&gt;</span><br><span class="line">      &#123;props.items.map(<span class="function"><span class="params">item</span> =&gt;</span> (</span><br><span class="line">        <span class="comment">// Without the `key`, React will fire a key warning</span></span><br><span class="line">        &lt;React.Fragment key=&#123;item.id&#125;&gt;</span><br><span class="line">          &lt;dt&gt;&#123;item.term&#125;&lt;<span class="regexp">/dt&gt;</span></span><br><span class="line"><span class="regexp">          &lt;dd&gt;&#123;item.description&#125;&lt;/</span>dd&gt;</span><br><span class="line">        &lt;<span class="regexp">/React.Fragment&gt;</span></span><br><span class="line"><span class="regexp">      ))&#125;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>dl&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 键是唯一可以传递给 Fragment 的属性。将来，可能会支持其他属性，例如事件处理程序。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="React-支持所有的-HTML-属性么"><a href="#React-支持所有的-HTML-属性么" class="headerlink" title="React 支持所有的 HTML 属性么?"></a>React 支持所有的 HTML 属性么?</h3><p>从 React 16 开始，完全支持标准或自定义 DOM 属性。由于 React 组件通常同时使用自定义和与 DOM 相关的属性，因此 React 与 DOM API 一样都使用 camelCase 约定。让我们对标准 HTML 属性采取一些措施：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div tabIndex=<span class="string">"-1"</span> /&gt;      <span class="comment">// Just like node.tabIndex DOM API</span></span><br><span class="line">&lt;div className=<span class="string">"Button"</span> /&gt; <span class="comment">// Just like node.className DOM API</span></span><br><span class="line">&lt;input readOnly=&#123;<span class="literal">true</span>&#125; /&gt;  <span class="comment">// Just like node.readOnly DOM API</span></span><br></pre></td></tr></table></figure>
<p>除了特殊情况外，这些属性的工作方式与相应的 HTML 属性类似。它还支持所有 SVG 属性。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="HOC-有哪些限制"><a href="#HOC-有哪些限制" class="headerlink" title="HOC 有哪些限制?"></a>HOC 有哪些限制?</h3><p>除了它的好处之外，高阶组件还有一些注意事项。 以下列出的几个注意事项:</p>
<ol>
<li><p><strong>不要在渲染方法中使用HOC：</strong><br>建议不要将 HOC 应用于组件的 render 方法中的组件。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="comment">// A new version of EnhancedComponent is created on every render</span></span><br><span class="line">  <span class="comment">// EnhancedComponent1 !== EnhancedComponent2</span></span><br><span class="line">  <span class="keyword">const</span> EnhancedComponent = enhance(MyComponent);</span><br><span class="line">  <span class="comment">// That causes the entire subtree to unmount/remount each time!</span></span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">EnhancedComponent</span> /&gt;</span>;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p>上述代码通过重新装载，将导致该组件及其所有子组件状态丢失，会影响到性能。正确的做法应该是在组件定义之外应用 HOC ，以便仅生成一次生成的组件</p>
</li>
<li><p><strong>静态方法必须复制：</strong><br>将 HOC 应用于组件时，新组件不具有原始组件的任何静态方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Define a static method</span></span><br><span class="line">WrappedComponent.staticMethod = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;<span class="comment">/*...*/</span>&#125;</span><br><span class="line"><span class="comment">// Now apply a HOC</span></span><br><span class="line"><span class="keyword">const</span> EnhancedComponent = enhance(WrappedComponent);</span><br><span class="line"></span><br><span class="line"><span class="comment">// The enhanced component has no static method</span></span><br><span class="line"><span class="keyword">typeof</span> EnhancedComponent.staticMethod === <span class="string">'undefined'</span> <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>您可以通过在返回之前将方法复制到输入组件上来解决此问题</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enhance</span>(<span class="params">WrappedComponent</span>) </span>&#123;</span><br><span class="line">  <span class="class"><span class="keyword">class</span> <span class="title">Enhance</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;<span class="comment">/*...*/</span>&#125;</span><br><span class="line">  <span class="comment">// Must know exactly which method(s) to copy :(</span></span><br><span class="line">  Enhance.staticMethod = WrappedComponent.staticMethod;</span><br><span class="line">  <span class="keyword">return</span> Enhance;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>Refs 不会被往下传递</strong><br>对于HOC，您需要将所有属性传递给包装组件，但这对于 refs 不起作用。这是因为 ref 并不是一个类似于 key 的属性。在这种情况下，您需要使用 React.forwardRef API。</p>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在-DevTools-中调试-forwardRefs"><a href="#如何在-DevTools-中调试-forwardRefs" class="headerlink" title="如何在 DevTools 中调试 forwardRefs?"></a>如何在 DevTools 中调试 forwardRefs?</h3><p><strong>React.forwardRef</strong>接受渲染函数作为参数，DevTools 使用此函数来确定为 ref 转发组件显示的内容。例如，如果您没有使用 displayName 属性命名 render 函数，那么它将在 DevTools 中显示为“ForwardRef”，</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> WrappedComponent = React.forwardRef(<span class="function">(<span class="params">props, ref</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">LogProps</span> &#123;<span class="attr">...props</span>&#125; <span class="attr">forwardedRef</span>=<span class="string">&#123;ref&#125;</span> /&gt;</span>;</span></span><br><span class="line"><span class="xml">&#125;);</span></span><br></pre></td></tr></table></figure>
<p>但如果你命名 render 函数，那么它将显示为 <strong>“ForwardRef(myFunction)”</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> WrappedComponent = React.forwardRef(</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params">props, ref</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">LogProps</span> &#123;<span class="attr">...props</span>&#125; <span class="attr">forwardedRef</span>=<span class="string">&#123;ref&#125;</span> /&gt;</span>;</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">);</span></span><br></pre></td></tr></table></figure>
<p>作为替代方案，您还可以为 forwardRef 函数设置 displayName 属性，</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">logProps</span>(<span class="params">Component</span>) </span>&#123;</span><br><span class="line">  <span class="class"><span class="keyword">class</span> <span class="title">LogProps</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">forwardRef</span>(<span class="params">props, ref</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">LogProps</span> &#123;<span class="attr">...props</span>&#125; <span class="attr">forwardedRef</span>=<span class="string">&#123;ref&#125;</span> /&gt;</span>;</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">  // Give this component a more helpful display name in DevTools.</span></span><br><span class="line"><span class="xml">  // e.g. "ForwardRef(logProps(MyComponent))"</span></span><br><span class="line"><span class="xml">  const name = Component.displayName || Component.name;</span></span><br><span class="line"><span class="xml">  forwardRef.displayName = `logProps($&#123;name&#125;)`;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">  return React.forwardRef(forwardRef);</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么时候组件的-props-属性默认为-true"><a href="#什么时候组件的-props-属性默认为-true" class="headerlink" title="什么时候组件的 props 属性默认为 true?"></a>什么时候组件的 props 属性默认为 true?</h3><p>如果没有传递属性值，则默认为 true。此行为可用，以便与 HTML 的行为匹配。例如，下面的表达式是等价的：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;MyInput autocomplete /&gt;</span><br><span class="line"></span><br><span class="line">&lt;MyInput autocomplete=&#123;<span class="literal">true</span>&#125; /&gt;</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 不建议使用此方法，因为它可能与 ES6 对象 shorthand 混淆（例如，{name}，它是{ name:name } 的缩写）</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-NextJS-及其主要特征"><a href="#什么是-NextJS-及其主要特征" class="headerlink" title="什么是 NextJS 及其主要特征?"></a>什么是 NextJS 及其主要特征?</h3><p>Next.js 是一个流行的轻量级框架，用于使用 React 构建静态和服务端渲染应用程序。它还提供样式和路由解决方案。以下是 NextJS 提供的主要功能：</p>
<ol>
<li>默认服务端渲染</li>
<li>自动代码拆分以加快页面加载速度</li>
<li>简单的客户端路由 (基于页面)</li>
<li>基于 Webpack 的开发环境支持 (HMR)</li>
<li>能够使用 Express 或任何其他 Node.js HTTP 服务器</li>
<li>可自定义你自己的 Babel 和 Webpack 配置</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何将事件处理程序传递给组件"><a href="#如何将事件处理程序传递给组件" class="headerlink" title="如何将事件处理程序传递给组件?"></a>如何将事件处理程序传递给组件?</h3><p>可以将事件处理程序和其他函数作为属性传递给子组件。它可以在子组件中使用，如下所示：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick=&#123;this.handleClick&#125;&gt;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在渲染方法中使用箭头函数好么"><a href="#在渲染方法中使用箭头函数好么" class="headerlink" title="在渲染方法中使用箭头函数好么?"></a>在渲染方法中使用箭头函数好么?</h3><p>是的，你可以用。它通常是向回调函数传递参数的最简单方法。但在使用时需要优化性能。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  handleClick() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'Click happened'</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;()</span> =&gt;</span> this.handleClick()&#125;&gt;Click Me<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 组件每次渲染时，在 render 方法中的箭头函数都会创建一个新的函数，这可能会影响性能。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何防止函数被多次调用"><a href="#如何防止函数被多次调用" class="headerlink" title="如何防止函数被多次调用?"></a>如何防止函数被多次调用?</h3><p>如果你使用一个事件处理程序，如 <strong>onClick or onScroll</strong> 并希望防止回调被过快地触发，那么你可以限制回调的执行速度。</p>
<p>这可以通过以下可能的方式实现：</p>
<ol>
<li><strong>Throttling:</strong> 基于时间的频率进行更改。例如，它可以使用 lodash 的 _.throttle 函数。</li>
<li><strong>Debouncing:</strong> 在一段时间不活动后发布更改。例如，可以使用 lodash 的 _.debounce 函数。</li>
<li><strong>RequestAnimationFrame throttling:</strong> 基于 requestAnimationFrame 的更改。例如，可以使用 raf-schd。</li>
</ol>
<blockquote>
<p>注意：_.debounce， _.throttle 和 raf-schd 都提供了一个 cancel 方法来取消延迟回调。所以需要调用 componentWillUnmount，或者对代码进行检查来保证在延迟函数有效期间内组件始终挂载。</p>
</blockquote>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="JSX-如何防止注入攻击"><a href="#JSX-如何防止注入攻击" class="headerlink" title="JSX 如何防止注入攻击?"></a>JSX 如何防止注入攻击?</h3><p>React DOM 会在渲染 JSX 中嵌入的任何值之前对其进行转义。因此，它确保你永远不能注入任何未在应用程序中显式写入的内容。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> name = response.potentiallyMaliciousInput;</span><br><span class="line"><span class="keyword">const</span> element = <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;name&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>;</span><br></pre></td></tr></table></figure>
<p>这样可以防止应用程序中的XSS（跨站点脚本）攻击。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何更新已渲染的元素"><a href="#如何更新已渲染的元素" class="headerlink" title="如何更新已渲染的元素?"></a>如何更新已渲染的元素?</h3><p>通过将新创建的元素传递给 ReactDOM 的 render 方法，可以实现 UI 更新。例如，让我们举一个滴答时钟的例子，它通过多次调用 render 方法来更新时间：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">tick</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> element = (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h1&gt;Hello, world!<span class="xml"><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">      &lt;h2&gt;It is &#123;<span class="keyword">new</span> <span class="built_in">Date</span>().toLocaleTimeString()&#125;.&lt;<span class="regexp">/h2&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  );</span><br><span class="line">  ReactDOM.render(element, <span class="built_in">document</span>.getElementById(<span class="string">'root'</span>));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">setInterval(tick, <span class="number">1000</span>);</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="你怎么说-props-是只读的"><a href="#你怎么说-props-是只读的" class="headerlink" title="你怎么说 props 是只读的?"></a>你怎么说 props 是只读的?</h3><p>当你将组件声明为函数或类时，它决不能修改自己的属性。让我们来实现一个 capital 的函数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">capital</span>(<span class="params">amount, interest</span>) </span>&#123;</span><br><span class="line">   <span class="keyword">return</span> amount + interest;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面的函数称为“纯”函数，因为它不会尝试更改输入，并总是为相同的输入返回相同的结果。因此，React 有一条规则，即“所有 React 组件的行为都必须像纯函数一样”。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="你认为状态更新是如何合并的"><a href="#你认为状态更新是如何合并的" class="headerlink" title="你认为状态更新是如何合并的?"></a>你认为状态更新是如何合并的?</h3><p>当你在组件中调用 setState() 方法时，React 会将提供的对象合并到当前状态。例如，让我们以一个使用帖子和评论详细信息的作为状态变量的 Facebook 用户为例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">  <span class="keyword">super</span>(props);</span><br><span class="line">  <span class="keyword">this</span>.state = &#123;</span><br><span class="line">    posts: [],</span><br><span class="line">    comments: []</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>现在，你可以独立调用 setState() 方法，单独更新状态变量：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">componentDidMount() &#123;</span><br><span class="line">   fetchPosts().then(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">     <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">       posts: response.posts</span><br><span class="line">     &#125;);</span><br><span class="line">   &#125;);</span><br><span class="line"></span><br><span class="line">   fetchComments().then(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">     <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">       comments: response.comments</span><br><span class="line">     &#125;);</span><br><span class="line">   &#125;);</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<p>如上面的代码段所示，<code>this.setState({comments})</code> 只会更新 comments 变量，而不会修改或替换 posts 变量。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何将参数传递给事件处理程序"><a href="#如何将参数传递给事件处理程序" class="headerlink" title="如何将参数传递给事件处理程序?"></a>如何将参数传递给事件处理程序?</h3><p>在迭代或循环期间，向事件处理程序传递额外的参数是很常见的。这可以通过箭头函数或绑定方法实现。让我们以网格中更新的用户详细信息为例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick=&#123;(e) =&gt; <span class="keyword">this</span>.updateUser(userId, e)&#125;&gt;Update User details&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">&lt;button onClick=&#123;this.updateUser.bind(this, userId)&#125;&gt;Update User details&lt;/</span>button&gt;</span><br></pre></td></tr></table></figure>
<p>在这两种方法中，合成参数 e 作为第二个参数传递。你需要在箭头函数中显式传递它，并使用 bind 方法自动转发它。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何防止组件渲染"><a href="#如何防止组件渲染" class="headerlink" title="如何防止组件渲染?"></a>如何防止组件渲染?</h3><p>你可以基于特定的条件通过返回 null 值来阻止组件的渲染。这样它就可以有条件地渲染组件。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Greeting</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (!props.loggedIn) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div className=<span class="string">"greeting"</span>&gt;</span><br><span class="line">      welcome, &#123;props.name&#125;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props);</span><br><span class="line">    <span class="keyword">this</span>.state = &#123;<span class="attr">loggedIn</span>: <span class="literal">false</span>, <span class="attr">name</span>: <span class="string">'John'</span>&#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">   <span class="keyword">return</span> (</span><br><span class="line">       &lt;div&gt;</span><br><span class="line">         <span class="comment">//Prevent component render if it is not loggedIn</span></span><br><span class="line">         &lt;Greeting loggedIn=&#123;<span class="keyword">this</span>.state.loggedIn&#125; /&gt;</span><br><span class="line">         &lt;UserDetails name=&#123;<span class="keyword">this</span>.state.name&#125;&gt;</span><br><span class="line">       &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">   );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br></pre></td></tr></table></figure>
<p>在上面的示例中，greeting 组件通过应用条件并返回空值跳过其渲染部分。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="安全地使用索引作为键的条件是什么"><a href="#安全地使用索引作为键的条件是什么" class="headerlink" title="安全地使用索引作为键的条件是什么?"></a>安全地使用索引作为键的条件是什么?</h3><p>有三个条件可以确保，使用索引作为键是安全的：</p>
<ol>
<li>列表项是静态的，它们不会被计算，也不会更改。</li>
<li>列表中的列表项没有 ids 属性。</li>
<li>列表不会被重新排序或筛选。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="keys-是否需要全局唯一"><a href="#keys-是否需要全局唯一" class="headerlink" title="keys 是否需要全局唯一?"></a>keys 是否需要全局唯一?</h3><p>数组中使用的键在其同级中应该是唯一的，但它们不需要是全局唯一的。也就是说，你可以在两个不同的数组中使用相同的键。例如，下面的 book 组件在不同的组件中使用相同的数组：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Book</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> index = (</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &#123;props.pages.map(<span class="function">(<span class="params">page</span>) =&gt;</span></span><br><span class="line">        &lt;li key=&#123;page.id&#125;&gt;</span><br><span class="line">          &#123;page.title&#125;</span><br><span class="line">        &lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">      )&#125;</span></span><br><span class="line"><span class="regexp">    &lt;/u</span>l&gt;</span><br><span class="line">  );</span><br><span class="line">  <span class="keyword">const</span> content = props.pages.map(<span class="function">(<span class="params">page</span>) =&gt;</span></span><br><span class="line">    &lt;div key=&#123;page.id&#125;&gt;</span><br><span class="line">      &lt;h3&gt;&#123;page.title&#125;&lt;<span class="regexp">/h3&gt;</span></span><br><span class="line"><span class="regexp">      &lt;p&gt;&#123;page.content&#125;&lt;/</span>p&gt;</span><br><span class="line">      &lt;p&gt;&#123;page.pageNumber&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  );</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &#123;index&#125;</span><br><span class="line">      &lt;hr /&gt;</span><br><span class="line">      &#123;content&#125;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="用于表单处理的流行选择是什么"><a href="#用于表单处理的流行选择是什么" class="headerlink" title="用于表单处理的流行选择是什么?"></a>用于表单处理的流行选择是什么?</h3><p>Formik 是一个用于 React 的表单库，它提供验证、跟踪访问字段和处理表单提交等解决方案。具体来说，你可以按以下方式对它们进行分类：</p>
<ol>
<li>获取表单状态输入和输出的值。</li>
<li>表单验证和错误消息。</li>
<li>处理表单提交。</li>
</ol>
<p>它用于创建一个具有最小 API 的可伸缩、性能良好的表单助手，以解决令人讨厌的问题。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="formik-相对于其他-redux-表单库有什么优势"><a href="#formik-相对于其他-redux-表单库有什么优势" class="headerlink" title="formik 相对于其他 redux 表单库有什么优势?"></a>formik 相对于其他 redux 表单库有什么优势?</h3><p>下面是建议使用 formik 而不是 redux 表单库的主要原因：</p>
<ol>
<li>表单状态本质上是短期的和局部的，因此不需要在 redux（或任何类型的flux库）中跟踪它。</li>
<li>每次按一个键，Redux-Form 都会多次调用整个顶级 Redux Reducer。这样就增加了大型应用程序的输入延迟。</li>
<li>经过 gzip 压缩过的 Redux-Form 为 22.5 kB，而 Formik 只有 12.7 kB。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="为什么不需要使用继承"><a href="#为什么不需要使用继承" class="headerlink" title="为什么不需要使用继承?"></a>为什么不需要使用继承?</h3><p>在 React 中，建议使用组合而不是继承来重用组件之间的代码。Props 和 composition 都为你提供了以一种明确和安全的方式自定义组件外观和行为所需的灵活性。但是，如果你希望在组件之间复用非 UI 功能，建议将其提取到单独的 JavaScript 模块中。之后的组件导入它并使用该函数、对象或类，而不需扩展它。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="我可以在-React-应用程序中可以使用-web-components-么"><a href="#我可以在-React-应用程序中可以使用-web-components-么" class="headerlink" title="我可以在 React 应用程序中可以使用 web components 么?"></a>我可以在 React 应用程序中可以使用 web components 么?</h3><p>是的，你可以在 React 应用程序中使用 Web Components。尽管许多开发人员不会使用这种组合方式，但如果你使用的是使用 Web Components 编写的第三方 UI 组件，则可能需要这种组合。例如，让我们使用 Vaadin 提供的 Web Components 日期选择器组件：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'./App.css'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'@vaadin/vaadin-date-picker'</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div className=<span class="string">"App"</span>&gt;</span><br><span class="line">        &lt;vaadin-date-picker label=<span class="string">"When were you born?"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">vaadin-date-picker</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是动态导入"><a href="#什么是动态导入" class="headerlink" title="什么是动态导入?"></a>什么是动态导入?</h3><p>动态导入语法是 ECMAScript 提案，目前不属于语言标准的一部分。它有望在不久的将来被采纳。在你的应用程序中，你可以使用动态导入来实现代码拆分。让我们举一个加法的例子：</p>
<ol>
<li><p><strong>Normal Import</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; add &#125; <span class="keyword">from</span> <span class="string">'./math'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">10</span>, <span class="number">20</span>));</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>Dynamic Import</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span>(<span class="string">"./math"</span>).then(<span class="function"><span class="params">math</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(math.add(<span class="number">10</span>, <span class="number">20</span>));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-loadable-组件"><a href="#什么是-loadable-组件" class="headerlink" title="什么是 loadable 组件?"></a>什么是 loadable 组件?</h3><p>如果你想要在服务端渲染的应用程序中实现代码拆分，建议使用 Loadable 组件，因为 React.lazy 和 Suspense 还不可用于服务器端渲染。Loadable 允许你将动态导入的组件作为常规的组件进行渲染。让我们举一个例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> loadable <span class="keyword">from</span> <span class="string">'@loadable/component'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> OtherComponent = loadable(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'./OtherComponent'</span>))</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyComponent</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;OtherComponent /&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  )</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p>现在，其他组件将以单独的包进行加载。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-suspense-组件"><a href="#什么是-suspense-组件" class="headerlink" title="什么是 suspense 组件?"></a>什么是 suspense 组件?</h3><p>如果父组件在渲染时包含 dynamic import 的模块尚未加载完成，在此加载过程中，你必须使用一个 loading 指示器显示后备内容。这可以使用 <strong>Suspense</strong> 组件来实现。例如，下面的代码使用 Suspense 组件：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> OtherComponent = React.lazy(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'./OtherComponent'</span>));</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyComponent</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;Suspense fallback=&#123;&lt;div&gt;Loading...&lt;<span class="regexp">/div&gt;&#125;&gt;</span></span><br><span class="line"><span class="regexp">        &lt;OtherComponent /</span>&gt;</span><br><span class="line">      &lt;<span class="regexp">/Suspense&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>正如上面的代码中所展示的，懒加载的组件被包装在 Suspense 组件中。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是基于路由的代码拆分"><a href="#什么是基于路由的代码拆分" class="headerlink" title="什么是基于路由的代码拆分?"></a>什么是基于路由的代码拆分?</h3><p>进行代码拆分的最佳位置之一是路由。整个页面将立即重新渲染，因此用户不太可能同时与页面中的其他元素进行交互。因此，用户体验不会受到干扰。让我们以基于路由的网站为例，使用像 React Router 和 React.lazy 这样的库：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; BrowserRouter <span class="keyword">as</span> Router, Route, Switch &#125; <span class="keyword">from</span> <span class="string">'react-router-dom'</span>;</span><br><span class="line"><span class="keyword">import</span> React, &#123; Suspense, lazy &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Home = lazy(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'./routes/Home'</span>));</span><br><span class="line"><span class="keyword">const</span> About = lazy(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'./routes/About'</span>));</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> App = <span class="function"><span class="params">()</span> =&gt;</span> (</span><br><span class="line">  &lt;Router&gt;</span><br><span class="line">    &lt;Suspense fallback=&#123;&lt;div&gt;Loading...&lt;<span class="regexp">/div&gt;&#125;&gt;</span></span><br><span class="line"><span class="regexp">      &lt;Switch&gt;</span></span><br><span class="line"><span class="regexp">        &lt;Route exact path="/</span><span class="string">" component=&#123;Home&#125;/&gt;</span></span><br><span class="line"><span class="string">        &lt;Route path="</span>/about<span class="string">" component=&#123;About&#125;/&gt;</span></span><br><span class="line"><span class="string">      &lt;/Switch&gt;</span></span><br><span class="line"><span class="string">    &lt;/Suspense&gt;</span></span><br><span class="line"><span class="string">  &lt;/Router&gt;</span></span><br><span class="line"><span class="string">);</span></span><br></pre></td></tr></table></figure>
<p>在上面的代码中，代码拆分将发生在每个路由层级。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="举例说明如何使用-context"><a href="#举例说明如何使用-context" class="headerlink" title="举例说明如何使用 context?"></a>举例说明如何使用 context?</h3><p><strong>Context</strong> 旨在共享可被视为全局的数据，用于 React 组件树。例如，在下面的代码中，允许手动通过一个 theme 属性来设置按钮组件的样式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Lets create a context with a default theme value "luna"</span></span><br><span class="line"><span class="keyword">const</span> ThemeContext = React.createContext(<span class="string">'luna'</span>);</span><br><span class="line"><span class="comment">// Create App component where it uses provider to pass theme value in the tree</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;ThemeContext.Provider value=<span class="string">"nova"</span>&gt;</span><br><span class="line">        &lt;Toolbar /&gt;</span><br><span class="line">      &lt;<span class="regexp">/ThemeContext.Provider&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ A middle component where you don't need to pass theme prop anymore</span></span><br><span class="line"><span class="regexp">function Toolbar(props) &#123;</span></span><br><span class="line"><span class="regexp">  return (</span></span><br><span class="line"><span class="regexp">    &lt;div&gt;</span></span><br><span class="line"><span class="regexp">      &lt;ThemedButton /</span>&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ Lets read theme value in the button component to use</span></span><br><span class="line"><span class="regexp">class ThemedButton extends React.Component &#123;</span></span><br><span class="line"><span class="regexp">  static contextType = ThemeContext;</span></span><br><span class="line"><span class="regexp">  render() &#123;</span></span><br><span class="line"><span class="regexp">    return &lt;Button theme=&#123;this.context&#125; /</span>&gt;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在-context-中默认值的目的是什么"><a href="#在-context-中默认值的目的是什么" class="headerlink" title="在 context 中默认值的目的是什么?"></a>在 context 中默认值的目的是什么?</h3><p>当在组件树中的组件没有匹配到在其上方的 Provider 时，才会使用 defaultValue 参数。这有助于在不包装组件的情况下单独测试组件。下面的代码段提供了默认的主题值 Luna。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> defaultTheme = <span class="string">"Luna"</span>;</span><br><span class="line"><span class="keyword">const</span> MyContext = React.createContext(defaultTheme);</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="你是怎么使用-contextType"><a href="#你是怎么使用-contextType" class="headerlink" title="你是怎么使用 contextType?"></a>你是怎么使用 contextType?</h3><p>ContextType 用于消费 context 对象。ContextType 属性可以通过两种方式使用：</p>
<ol>
<li><strong>contextType as property of class:</strong><br>可以为类的 contextType 属性分配通过 React.createContext() 创建的 context 对象。之后，你可以在任何生命周期方法和 render 函数中使用 <code>this.context</code> 引用该上下文类型最近的当前值。</li>
</ol>
<p>让我们在 MyClass 上按如下方式设置 contextType 属性：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyClass</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  componentDidMount() &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="keyword">this</span>.context;</span><br><span class="line">    <span class="comment">/* perform a side-effect at mount using the value of MyContext */</span></span><br><span class="line">  &#125;</span><br><span class="line">  componentDidUpdate() &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="keyword">this</span>.context;</span><br><span class="line">    <span class="comment">/* ... */</span></span><br><span class="line">  &#125;</span><br><span class="line">  componentWillUnmount() &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="keyword">this</span>.context;</span><br><span class="line">    <span class="comment">/* ... */</span></span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="keyword">this</span>.context;</span><br><span class="line">    <span class="comment">/* render something based on the value of MyContext */</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">MyClass.contextType = MyContext;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li><strong>Static field</strong><br>你可以使用静态类属性来初始化 contextType 属性：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyClass</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> contextType = MyContext;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="keyword">this</span>.context;</span><br><span class="line">    <span class="comment">/* render something based on the value */</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-consumer"><a href="#什么是-consumer" class="headerlink" title="什么是 consumer?"></a>什么是 consumer?</h3><p>Consumer 是一个订阅上下文更改的 React 组件。它需要一个函数作为子元素，该函数接收当前上下文的值作为参数，并返回一个 React 元素。传递给函数 value 参数的参数值将等于在组件树中当前组件最近的 Provider 元素的 value 属性值。举个简单的例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;MyContext.Consumer&gt;</span><br><span class="line">  &#123;value =&gt; <span class="comment">/* render something based on the context value */</span>&#125;</span><br><span class="line">&lt;<span class="regexp">/MyContext.Consumer&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在使用-context-时，如何解决性能方面的问题"><a href="#在使用-context-时，如何解决性能方面的问题" class="headerlink" title="在使用 context 时，如何解决性能方面的问题?"></a>在使用 context 时，如何解决性能方面的问题?</h3><p>Context 使用引用标识来确定何时重新渲染，当 Provider 的父元素重新渲染时，会有一些问题即可能会在 Consumers 中触发无任何意图的渲染。 例如，下面的代码将在每次 Provider 重新渲染时，重新渲染所有的 Consumers，这是因为渲染 Provider 时，始终会为 value 属性创建一个新的对象：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;Provider value=&#123;&#123;<span class="attr">something</span>: <span class="string">'something'</span>&#125;&#125;&gt;</span><br><span class="line">        &lt;Toolbar /&gt;</span><br><span class="line">      &lt;<span class="regexp">/Provider&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<pre><code>可以通过把 value 的值提升到父状态中来解决这个问题：

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props);</span><br><span class="line">    <span class="keyword">this</span>.state = &#123;</span><br><span class="line">      value: &#123;<span class="attr">something</span>: <span class="string">'something'</span>&#125;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;Provider value=&#123;<span class="keyword">this</span>.state.value&#125;&gt;</span><br><span class="line">        &lt;Toolbar /&gt;</span><br><span class="line">      &lt;<span class="regexp">/Provider&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

**[⬆ 返回顶部](#目录)**
</code></pre><ol start="282">
<li><h3 id="在-HOCs-中-forward-ref-的目的是什么"><a href="#在-HOCs-中-forward-ref-的目的是什么" class="headerlink" title="在 HOCs 中 forward ref 的目的是什么?"></a>在 HOCs 中 forward ref 的目的是什么?</h3><p>因为 ref 不是一个属性，所以 Refs 不会被传递。就像 <strong>key</strong> 一样，React 会以不同的方式处理它。如果你将 ref 添加到 HOC，则该 ref 将引用最外层的容器组件，而不是包装的组件。在这种情况下，你可以使用 Forward Ref API。例如，你可以使用 React.forwardRef API 显式地将 refs 转发的内部的 FancyButton 组件。</p>
<p>以下的 HOC 会记录所有的 props 变化：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">logProps</span>(<span class="params">Component</span>) </span>&#123;</span><br><span class="line">  <span class="class"><span class="keyword">class</span> <span class="title">LogProps</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">    componentDidUpdate(prevProps) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'old props:'</span>, prevProps);</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'new props:'</span>, <span class="keyword">this</span>.props);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    render() &#123;</span><br><span class="line">      <span class="keyword">const</span> &#123;forwardedRef, ...rest&#125; = <span class="keyword">this</span>.props;</span><br><span class="line"></span><br><span class="line">      <span class="comment">// Assign the custom prop "forwardedRef" as a ref</span></span><br><span class="line">      <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">Component</span> <span class="attr">ref</span>=<span class="string">&#123;forwardedRef&#125;</span> &#123;<span class="attr">...rest</span>&#125; /&gt;</span>;</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">  return React.forwardRef((props, ref) =&gt; &#123;</span></span><br><span class="line">    return &lt;LogProps &#123;...props&#125; forwardedRef=&#123;ref&#125; /&gt;;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>让我们使用这个 HOC 来记录所有传递到我们 “fancy button” 组件的属性：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">FancyButton</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  focus() &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> logProps(FancyButton);</span><br></pre></td></tr></table></figure>
<p>现在让我们创建一个 ref 并将其传递给 FancyButton 组件。在这种情况下，你可以聚焦到 button 元素上。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> FancyButton <span class="keyword">from</span> <span class="string">'./FancyButton'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> ref = React.createRef();</span><br><span class="line">ref.current.focus();</span><br><span class="line">&lt;FancyButton</span><br><span class="line">  label=<span class="string">"Click Me"</span></span><br><span class="line">  handleClick=&#123;handleClick&#125;</span><br><span class="line">  ref=&#123;ref&#125;</span><br><span class="line">/&gt;;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="ref-参数对于所有函数或类组件是否可用"><a href="#ref-参数对于所有函数或类组件是否可用" class="headerlink" title="ref 参数对于所有函数或类组件是否可用?"></a>ref 参数对于所有函数或类组件是否可用?</h3><p>常规函数或类组件不会接收到 ref 参数，并且 ref 在 props 中也不可用。只有在使用 React.forwardRef 定义组件时，才存在第二个 ref 参数。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="在组件库中当使用-forward-refs-时，你需要额外的注意"><a href="#在组件库中当使用-forward-refs-时，你需要额外的注意" class="headerlink" title="在组件库中当使用 forward refs 时，你需要额外的注意?"></a>在组件库中当使用 forward refs 时，你需要额外的注意?</h3><p>当你开始在组件库中使用 forwardRef 时，你应该将其视为一个破坏性的更改，并为库发布一个新的主要版本。这是因为你的库可能具有不同的行为，如已分配了哪些引用，以及导出哪些类型。这些更改可能会破坏依赖于旧行为的应用程序和其他库。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何在没有-ES6-的情况下创建-React-类组件"><a href="#如何在没有-ES6-的情况下创建-React-类组件" class="headerlink" title="如何在没有 ES6 的情况下创建 React 类组件"></a>如何在没有 ES6 的情况下创建 React 类组件</h3><p>如果你不使用 ES6，那么你可能需要使用 create-react-class 模块。对于默认属性，你需要在传递对象上定义 getDefaultProps() 函数。而对于初始状态，必须提供返回初始状态的单独 getInitialState 方法。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> Greeting = createReactClass(&#123;</span><br><span class="line">  getDefaultProps: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        name: <span class="string">'Jhohn'</span></span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">  getInitialState: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;<span class="attr">message</span>: <span class="keyword">this</span>.props.message&#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">  handleClick: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">     <span class="built_in">console</span>.log(<span class="keyword">this</span>.state.message);</span><br><span class="line">  &#125;,</span><br><span class="line">  render: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello, &#123;this.props.name&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong> 如果使用 createReactClass，则所有方法都会自动绑定。也就是说，你不需要在事件处理程序的构造函数中使用 .bind(this)。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="是否可以在没有-JSX-的情况下使用-React"><a href="#是否可以在没有-JSX-的情况下使用-React" class="headerlink" title="是否可以在没有 JSX 的情况下使用 React?"></a>是否可以在没有 JSX 的情况下使用 React?</h3><p>是的，使用 React 不强制使用 JSX。实际上，当你不想在构建环境中配置编译环境时，这是很方便的。每个 JSX 元素只是调用 React.createElement(component, props, …children) 的语法糖。例如，让我们来看一下使用 JSX 的 greeting 示例：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Greeting</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Hello &#123;this.props.message&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">  &lt;Greeting message=<span class="string">"World"</span> /&gt;,</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">'root'</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<p>你可以在没有 JSX 的情况下编写相同的功能，如下所示：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Greeting</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> React.createElement(<span class="string">'div'</span>, <span class="literal">null</span>, <span class="string">`Hello <span class="subst">$&#123;<span class="keyword">this</span>.props.message&#125;</span>`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">  React.createElement(Greeting, &#123;<span class="attr">message</span>: <span class="string">'World'</span>&#125;, <span class="literal">null</span>),</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">'root'</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是差异算法"><a href="#什么是差异算法" class="headerlink" title="什么是差异算法?"></a>什么是差异算法?</h3><p>React 需要使用算法来了解如何有效地更新 UI 以匹配最新的树。差异算法将生成将一棵树转换为另一棵树的最小操作次数。然而，算法具有 O(n3) 的复杂度，其中 n 是树中元素的数量。在这种情况下，对于显示 1000 个元素将需要大约 10 亿个比较。这太昂贵了。相反，React 基于两个假设实现了一个复杂度为 O(n) 的算法：</p>
<ol>
<li>两种不同类型的元素会产生不同的树结构。</li>
<li>开发者可以通过一个 key 属性，标识哪些子元素可以在不同渲染中保持稳定。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="差异算法涵盖了哪些规则"><a href="#差异算法涵盖了哪些规则" class="headerlink" title="差异算法涵盖了哪些规则?"></a>差异算法涵盖了哪些规则?</h3><p>在区分两棵树时，React 首先比较两个根元素。根据根元素的类型，行为会有所不同。它在重构算法中涵盖了以下规则：</p>
<ol>
<li><p><strong>不同类型的元素：</strong><br>每当根元素具有不同的类型时，React 将移除旧树并从头开始构建新树。例如，元素 <a> 到 <img>，或从 <article> 到 <comment> 的不同类型的元素引导完全重建。</comment></article></a></p>
</li>
<li><p><strong>相同类型的DOM元素：</strong><br>当比较两个相同类型的 React DOM 元素时，React 查看两者的属性，保持相同的底层 DOM 节点，并仅更新已更改的属性。让我们以相同的 DOM 元素为例，除了 className 属性，</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div className=<span class="string">"show"</span> title=<span class="string">"ReactJS"</span> /&gt;</span><br><span class="line"></span><br><span class="line">&lt;div className=<span class="string">"hide"</span> title=<span class="string">"ReactJS"</span> /&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>相同类型的组件元素：</strong></p>
<p>当组件更新时，实例保持不变，以便在渲染之间保持状态。React 更新底层组件实例的 props 以匹配新元素，并在底层实例上调用 componentWillReceiveProps() 和 componentWillUpdate()。之后，调用 render() 方法，diff 算法对前一个结果和新结果进行递归。</p>
</li>
<li><p><strong>递归子节点：</strong><br>当对 DOM 节点的子节点进行递归时，React 会同时迭代两个子节点列表，并在出现差异时生成变异。例如，在子节点末尾添加元素时，在这两个树之间进行转换效果很好。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li&gt;first&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;second&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;ul&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;first&lt;/</span>li&gt;</span><br><span class="line">  &lt;li&gt;second&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li&gt;third&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>处理 Key：</strong></p>
</li>
</ol>
<p>React支持 key 属性。当子节点有 key 时，React 使用 key 将原始树中的子节点与后续树中的子节点相匹配。例如，添加 key 可以使树有效地转换，</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li key=<span class="string">"2015"</span>&gt;Duke&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li key="2016"&gt;Villanova&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;ul&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li key="2014"&gt;Connecticut&lt;/</span>li&gt;</span><br><span class="line">  &lt;li key=<span class="string">"2015"</span>&gt;Duke&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">  &lt;li key="2016"&gt;Villanova&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="你什么时候需要使用-refs"><a href="#你什么时候需要使用-refs" class="headerlink" title="你什么时候需要使用 refs?"></a>你什么时候需要使用 refs?</h3><p>这里是 refs 的一些使用场景：</p>
<ol>
<li>管理聚焦、文本选择或媒体播放。</li>
<li>触发命令式动画。</li>
<li>与第三方 DOM 库集成。</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="对于渲染属性来说是否必须将-prop-属性命名为-render"><a href="#对于渲染属性来说是否必须将-prop-属性命名为-render" class="headerlink" title="对于渲染属性来说是否必须将 prop 属性命名为 render?"></a>对于渲染属性来说是否必须将 prop 属性命名为 render?</h3><p>即使模式名为 <code>render props</code>，你也不必使用名为 render 的属性名来使用此模式。也就是说，组件用于知道即将渲染内容的任何函数属性，在技术上都是一个 <code>render props</code>。让我们举一个名为 children 渲染属性的示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;Mouse children=&#123;mouse =&gt; (</span><br><span class="line">  &lt;p&gt;The mouse position is &#123;mouse.x&#125;, &#123;mouse.y&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">)&#125;/</span>&gt;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<pre><code>实际上，以上的 children 属性不一定需要在 JSX 元素的 `attributes` 列表中命名。反之，你可以将它直接放在元素内部：  

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;Mouse&gt;</span><br><span class="line">  &#123;mouse =&gt; (</span><br><span class="line">    &lt;p&gt;The mouse position is &#123;mouse.x&#125;, &#123;mouse.y&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">  )&#125;</span></span><br><span class="line"><span class="regexp">&lt;/</span>Mouse&gt;</span><br></pre></td></tr></table></figure>

当使用上述的技术，需要在 propTypes 中明确声明 children 必须为函数类型：

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Mouse.propTypes = &#123;</span><br><span class="line">  children: PropTypes.func.isRequired</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

**[⬆ 返回顶部](#目录)**
</code></pre><ol start="291">
<li><h3 id="在-Pure-Component-中使用渲染属性会有什么问题"><a href="#在-Pure-Component-中使用渲染属性会有什么问题" class="headerlink" title="在 Pure Component 中使用渲染属性会有什么问题?"></a>在 Pure Component 中使用渲染属性会有什么问题?</h3><p>如果在渲染方法中创建函数，则会否定纯组件的用途。因为浅属性比较对于新属性总是返回 false，在这种情况下，每次渲染都将为渲染属性生成一个新值。你可以通过将渲染函数定义为实例方法来解决这个问题。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何使用渲染属性创建-HOC"><a href="#如何使用渲染属性创建-HOC" class="headerlink" title="如何使用渲染属性创建 HOC?"></a>如何使用渲染属性创建 HOC?</h3><p>可以使用带有渲染属性的常规组件实现大多数高阶组件（HOC）。例如，如果希望使用 withMouse HOC 而不是 <code>&lt;Mouse&gt;</code> 组件，则你可以使用带有渲染属性的常规 <code>&lt;Mouse&gt;</code> 组件轻松创建一个 HOC 组件。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">withMouse</span>(<span class="params">Component</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="class"><span class="keyword">class</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">    render() &#123;</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">        &lt;Mouse render=&#123;mouse =&gt; (</span><br><span class="line">          &lt;Component &#123;...this.props&#125; mouse=&#123;mouse&#125; /&gt;</span><br><span class="line">        )&#125;/&gt;</span><br><span class="line">      );</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="什么是-windowing-技术"><a href="#什么是-windowing-技术" class="headerlink" title="什么是 windowing 技术?"></a>什么是 windowing 技术?</h3><p>Windowing 是一种技术，它在任何给定时间只呈现一小部分行，并且可以显著减少重新呈现组件所需的时间以及创建的 DOM 节点的数量。如果应用程序呈现长的数据列表，则建议使用此技术。react-window 和 react-virtualized 都是常用的 windowing 库，它提供了几个可重用的组件，用于显示列表、网格和表格数据。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="你如何在-JSX-中打印-falsy-值"><a href="#你如何在-JSX-中打印-falsy-值" class="headerlink" title="你如何在 JSX 中打印 falsy 值?"></a>你如何在 JSX 中打印 falsy 值?</h3><p>Falsy 值比如 false，null，undefined 是有效的子元素，但它们不会呈现任何内容。如果仍要显示它们，则需要将其转换为字符串。我们来举一个如何转换为字符串的例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">  My JavaScript variable is &#123;<span class="built_in">String</span>(myVariable)&#125;.</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="portals-的典型使用场景是什么"><a href="#portals-的典型使用场景是什么" class="headerlink" title="portals 的典型使用场景是什么?"></a>portals 的典型使用场景是什么?</h3><p>当父组件拥有 <code>overflow: hidden</code> 或含有影响堆叠上下文的属性（z-index、position、opacity 等样式），且需要脱离它的容器进行展示时，React portal 就非常有用。例如，对话框、全局消息通知、悬停卡和工具提示。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何设置非受控组件的默认值"><a href="#如何设置非受控组件的默认值" class="headerlink" title="如何设置非受控组件的默认值?"></a>如何设置非受控组件的默认值?</h3><p>在 React 中，表单元素的属性值将覆盖其 DOM 中的值。对于非受控组件，你可能希望能够指定其初始值，但不会控制后续的更新。要处理这种情形，你可以指定一个 <strong>defaultValue</strong> 属性来取代 <strong>value</strong> 属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;form onSubmit=&#123;<span class="keyword">this</span>.handleSubmit&#125;&gt;</span><br><span class="line">      &lt;label&gt;</span><br><span class="line">        User Name:</span><br><span class="line">        &lt;input</span><br><span class="line">          defaultValue=<span class="string">"John"</span></span><br><span class="line">          type=<span class="string">"text"</span></span><br><span class="line">          ref=&#123;<span class="keyword">this</span>.input&#125; /&gt;</span><br><span class="line">      &lt;<span class="regexp">/label&gt;</span></span><br><span class="line"><span class="regexp">      &lt;input type="submit" value="Submit" /</span>&gt;</span><br><span class="line">    &lt;<span class="regexp">/form&gt;</span></span><br><span class="line"><span class="regexp">  );</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p>这同样适用于 <code>select</code> 和 <code>textArea</code> 输入框。但对于 <code>checkbox</code> 和 <code>radio</code> 控件，需要使用 <strong>defaultChecked</strong>。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="你最喜欢的-React-技术栈是什么"><a href="#你最喜欢的-React-技术栈是什么" class="headerlink" title="你最喜欢的 React 技术栈是什么?"></a>你最喜欢的 React 技术栈是什么?</h3><p>尽管技术栈因开发人员而异，但最流行的技术栈用于 React boilerplate 项目代码中。它主要使用 redux 和 redux saga 进行状态管理和具有副作用的异步操作，使用 react-router 进行路由管理，使用 styled-components 库开发 React 组件，使用 axios 调用 REST api，以及其他支持的技术栈，如 webpack、reseselect、esnext、babel 等。</p>
<p>你可以克隆 <a href="https://github.com/react-boilerplate/react-boilerplate" target="_blank" rel="noopener">https://github.com/react-boilerplate/react-boilerplate</a> 并开始开发任何新的 React 项目。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="Real-DOM-和-Virtual-DOM-有什么区别"><a href="#Real-DOM-和-Virtual-DOM-有什么区别" class="headerlink" title="Real DOM 和 Virtual DOM 有什么区别?"></a>Real DOM 和 Virtual DOM 有什么区别?</h3><p>以下是Real DOM和Virtual DOM之间的主要区别：</p>
<p>| Real DOM | Virtual DOM |<br>| —– | ——- |<br>| 更新速度慢 | 更新速度快 |<br>| DOM 操作非常昂贵 | DOM 操作非常简单 |<br>| 可以直接更新 HTML | 你不能直接更新 HTML |<br>| 造成太多内存浪费 | 更少的内存消耗 |<br>| 如果元素更新了，创建新的 DOM 节点 | 如果元素更新，则更新 JSX 元素 |</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="如何为-React-应用程序添加-bootstrap"><a href="#如何为-React-应用程序添加-bootstrap" class="headerlink" title="如何为 React 应用程序添加 bootstrap?"></a>如何为 React 应用程序添加 bootstrap?</h3><p>Bootstrap 可以通过三种可能的方式添加到 React 应用程序中：</p>
<ol>
<li>使用 Bootstrap CDN:<br>这是添加 bootstrap 最简单的方式。在 head 标签中添加 bootstrap 相应的 CSS 和 JS 资源。</li>
<li><p>把 Bootstrap 作为依赖项：<br>如果你使用的是构建工具或模块绑定器（如Webpack），那么这是向 React 应用程序添加 bootstrap 的首选选项。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install bootstrap</span><br></pre></td></tr></table></figure>
</li>
<li><p>使用 React Bootstrap 包:<br>在这种情况下，你可以将 Bootstrap 添加到我们的 React 应用程序中，方法是使用一个以 React 组件形式对 Bootstrap 组件进行包装后包。下面的包在此类别中很流行：</p>
<ol>
<li>react-bootstrap</li>
<li>reactstrap</li>
</ol>
</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="你能否列出使用-React-作为前端框架的顶级网站或应用程序"><a href="#你能否列出使用-React-作为前端框架的顶级网站或应用程序" class="headerlink" title="你能否列出使用 React 作为前端框架的顶级网站或应用程序?"></a>你能否列出使用 React 作为前端框架的顶级网站或应用程序?</h3><p>以下是使用 React 作为前端框架的前 10 个网站：</p>
<ol>
<li>Facebook</li>
<li>Uber</li>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Khan Academy</li>
<li>Airbnb</li>
<li>Dropbox</li>
<li>Flipboard</li>
<li>Netflix</li>
<li>PayPal</li>
</ol>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
<li><h3 id="是否建议在-React-中使用-CSS-In-JS-技术"><a href="#是否建议在-React-中使用-CSS-In-JS-技术" class="headerlink" title="是否建议在 React 中使用 CSS In JS 技术?"></a>是否建议在 React 中使用 CSS In JS 技术?</h3><p>React 对如何定义样式没有任何意见，但如果你是初学者，那么好的起点是像往常一样在单独的 *.css 文件中定义样式，并使用类名引用它们。此功能不是 React 的一部分，而是来自第三方库。但是如果你想尝试不同的方法（JS中的CSS），那么 styled-components 库是一个不错的选择。</p>
<p><strong><a href="#目录">⬆ 返回顶部</a></strong></p>
</li>
</ol>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        
  <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
    <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
      <span>赏</span>
    </button>
    <div id="QR" style="display: none;">
      
        <div id="wechat" style="display: inline-block">
          <img id="wechat_qr" src="https://wurh.github.io/images/others/weixinshou.png" alt="华Ing WeChat Pay"/>
          <p>微信打赏</p>
        </div>
      
      
        <div id="alipay" style="display: inline-block">
          <img id="alipay_qr" src="https://wurh.github.io/images/others/alifu.png" alt="华Ing Alipay"/>
          <p>支付宝打赏</p>
        </div>
      
    </div>
  </div>


      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端-知识-面试/" rel="tag">#前端 知识 面试</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/03/31/201903311151/" rel="next" title="前端面试《第十二篇》侧重后端应用与对Node核心的理解">
                <i class="fa fa-chevron-left"></i> 前端面试《第十二篇》侧重后端应用与对Node核心的理解
              </a>
            
          </div>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/03/31/201904010024/" rel="prev" title="前端面试《第十四篇》 webpack">
                前端面试《第十四篇》 webpack <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        
<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div class="ds-thread" data-thread-key="2019/03/31/201903311205/"
           data-title="前端面试《第十三篇》 React" data-url="http://wurh.github.io/2019/03/31/201903311205/">
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            Overview
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="https://wurh.github.io/images/avatar/logo.jpg?123456"
               alt="华Ing" />
          <p class="site-author-name" itemprop="name">华Ing</p>
          <p class="site-description motion-element" itemprop="description">harder and harder</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">56</span>
              <span class="site-state-item-name">posts</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">11</span>
                <span class="site-state-item-name">categories</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">tags</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/wurh" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/1674582564/profile?topnav=1&wvr=6" target="_blank" title="微博">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  微博
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.zhihu.com/people/wu-rong-hua-56" target="_blank" title="知乎">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              Links
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="http://fsiaonma.github.io/" title="sam博客" target="_blank">sam博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://shenjoel.github.io/" title="joel博客" target="_blank">joel博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://firewood1122.github.io" title="firewood博客" target="_blank">firewood博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://reqianduan.com" title="热前端" target="_blank">热前端</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://opentutorial.info/" title="黄超博客" target="_blank">黄超博客</a>
                </li>
              
            </ul>
          </div>
        

      </section>

      
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">
            
              
            
            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#目录"><span class="nav-number">1.</span> <span class="nav-text">目录</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Core-React"><span class="nav-number"></span> <span class="nav-text">Core React</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-React"><span class="nav-number">1.</span> <span class="nav-text">什么是 React?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-的主要特点是什么"><span class="nav-number">2.</span> <span class="nav-text">React 的主要特点是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-JSX"><span class="nav-number">3.</span> <span class="nav-text">什么是 JSX?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#元素和组件有什么区别"><span class="nav-number">4.</span> <span class="nav-text">元素和组件有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-中创建组件"><span class="nav-number">5.</span> <span class="nav-text">如何在 React 中创建组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#何时使用类组件和函数组件"><span class="nav-number">6.</span> <span class="nav-text">何时使用类组件和函数组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Pure-Components"><span class="nav-number">7.</span> <span class="nav-text">什么是 Pure Components?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-的状态是什么"><span class="nav-number">8.</span> <span class="nav-text">React 的状态是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-中的-props-是什么"><span class="nav-number">9.</span> <span class="nav-text">React 中的 props 是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#状态和属性有什么区别"><span class="nav-number">10.</span> <span class="nav-text">状态和属性有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#我们为什么不能直接更新状态"><span class="nav-number">11.</span> <span class="nav-text">我们为什么不能直接更新状态?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#回调函数作为-setState-参数的目的是什么"><span class="nav-number">12.</span> <span class="nav-text">回调函数作为 setState() 参数的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-和-React-事件处理有什么区别"><span class="nav-number">13.</span> <span class="nav-text">HTML 和 React 事件处理有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-JSX-回调中绑定方法或事件处理程序"><span class="nav-number">14.</span> <span class="nav-text">如何在 JSX 回调中绑定方法或事件处理程序?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何将参数传递给事件处理程序或回调函数"><span class="nav-number">15.</span> <span class="nav-text">如何将参数传递给事件处理程序或回调函数?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-中的合成事件是什么"><span class="nav-number">16.</span> <span class="nav-text">React 中的合成事件是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是内联条件表达式"><span class="nav-number">17.</span> <span class="nav-text">什么是内联条件表达式?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-“key”-属性，在元素数组中使用它们有什么好处"><span class="nav-number">18.</span> <span class="nav-text">什么是 “key” 属性，在元素数组中使用它们有什么好处?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#refs-有什么用"><span class="nav-number">19.</span> <span class="nav-text">refs 有什么用?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何创建-refs"><span class="nav-number">20.</span> <span class="nav-text">如何创建 refs?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-forward-refs"><span class="nav-number">21.</span> <span class="nav-text">什么是 forward refs?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#callback-refs-和-findDOMNode-哪一个是首选选项"><span class="nav-number">22.</span> <span class="nav-text">callback refs 和 findDOMNode() 哪一个是首选选项?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么-String-Refs-被弃用"><span class="nav-number">23.</span> <span class="nav-text">为什么 String Refs 被弃用?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Virtual-DOM"><span class="nav-number">24.</span> <span class="nav-text">什么是 Virtual DOM?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Virtual-DOM-如何工作"><span class="nav-number">25.</span> <span class="nav-text">Virtual DOM 如何工作?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Shadow-DOM-和-Virtual-DOM-之间有什么区别"><span class="nav-number">26.</span> <span class="nav-text">Shadow DOM 和 Virtual DOM 之间有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-React-Fiber"><span class="nav-number">27.</span> <span class="nav-text">什么是 React Fiber?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Fiber-的主要目标是什么"><span class="nav-number">28.</span> <span class="nav-text">React Fiber 的主要目标是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是受控组件"><span class="nav-number">29.</span> <span class="nav-text">什么是受控组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是非受控组件"><span class="nav-number">30.</span> <span class="nav-text">什么是非受控组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#createElement-和-cloneElement-有什么区别"><span class="nav-number">31.</span> <span class="nav-text">createElement 和 cloneElement 有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中的提升状态是什么"><span class="nav-number">32.</span> <span class="nav-text">在 React 中的提升状态是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#组件生命周期的不同阶段是什么"><span class="nav-number">33.</span> <span class="nav-text">组件生命周期的不同阶段是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-生命周期方法有哪些"><span class="nav-number">34.</span> <span class="nav-text">React 生命周期方法有哪些?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是高阶组件（HOC）"><span class="nav-number">35.</span> <span class="nav-text">什么是高阶组件（HOC）?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何为高阶组件创建属性代理"><span class="nav-number">36.</span> <span class="nav-text">如何为高阶组件创建属性代理?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是上下文（Context）"><span class="nav-number">37.</span> <span class="nav-text">什么是上下文（Context）?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#children-属性是什么"><span class="nav-number">38.</span> <span class="nav-text">children 属性是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#怎样在-React-中写注释"><span class="nav-number">39.</span> <span class="nav-text">怎样在 React 中写注释?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#构造函数使用带-props-参数的目的是什么"><span class="nav-number">40.</span> <span class="nav-text">构造函数使用带 props 参数的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是调解"><span class="nav-number">41.</span> <span class="nav-text">什么是调解?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何使用动态属性名设置-state"><span class="nav-number">42.</span> <span class="nav-text">如何使用动态属性名设置 state ?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#每次组件渲染时调用函数的常见错误是什么"><span class="nav-number">43.</span> <span class="nav-text">每次组件渲染时调用函数的常见错误是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么有组件名称要首字母大写"><span class="nav-number">44.</span> <span class="nav-text">为什么有组件名称要首字母大写?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么-React-使用-className-而不是-class-属性"><span class="nav-number">45.</span> <span class="nav-text">为什么 React 使用 className 而不是 class 属性?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Fragments"><span class="nav-number">46.</span> <span class="nav-text">什么是 Fragments ?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么使用-Fragments-比使用容器-div-更好"><span class="nav-number">47.</span> <span class="nav-text">为什么使用 Fragments 比使用容器 div 更好?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中什么是-Portal"><span class="nav-number">48.</span> <span class="nav-text">在 React 中什么是 Portal ?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是无状态组件"><span class="nav-number">49.</span> <span class="nav-text">什么是无状态组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是有状态组件"><span class="nav-number">50.</span> <span class="nav-text">什么是有状态组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中如何校验-props-属性"><span class="nav-number">51.</span> <span class="nav-text">在 React 中如何校验 props 属性?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-的优点是什么"><span class="nav-number">52.</span> <span class="nav-text">React 的优点是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-的局限性是什么"><span class="nav-number">53.</span> <span class="nav-text">React 的局限性是什么?</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#如果有太多的小组件可能增加项目的庞大和复杂。"><span class="nav-number"></span> <span class="nav-text">如果有太多的小组件可能增加项目的庞大和复杂。</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-v16-中的错误边界是什么"><span class="nav-number">1.</span> <span class="nav-text">在 React v16 中的错误边界是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-v15-中如何处理错误边界"><span class="nav-number">2.</span> <span class="nav-text">在 React v15 中如何处理错误边界?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#静态类型检查推荐的方法是什么"><span class="nav-number">3.</span> <span class="nav-text">静态类型检查推荐的方法是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#react-dom-包的用途是什么"><span class="nav-number">4.</span> <span class="nav-text">react-dom 包的用途是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#react-dom-中-render-方法的目的是什么"><span class="nav-number">5.</span> <span class="nav-text">react-dom 中 render 方法的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ReactDOMServer-是什么"><span class="nav-number">6.</span> <span class="nav-text">ReactDOMServer 是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中如何使用-innerHTML"><span class="nav-number">7.</span> <span class="nav-text">在 React 中如何使用 innerHTML?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-中使用样式"><span class="nav-number">8.</span> <span class="nav-text">如何在 React 中使用样式?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中事件有何不同"><span class="nav-number">9.</span> <span class="nav-text">在 React 中事件有何不同?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如果在构造函数中使用-setState-会发生什么"><span class="nav-number">10.</span> <span class="nav-text">如果在构造函数中使用 setState() 会发生什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#索引作为键的影响是什么"><span class="nav-number">11.</span> <span class="nav-text">索引作为键的影响是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-componentWillMount-方法中使用-setState-好吗"><span class="nav-number">12.</span> <span class="nav-text">在 componentWillMount() 方法中使用 setState() 好吗?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如果在初始状态中使用-props-属性会发生什么"><span class="nav-number">13.</span> <span class="nav-text">如果在初始状态中使用 props 属性会发生什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何有条件地渲染组件"><span class="nav-number">14.</span> <span class="nav-text">如何有条件地渲染组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么在-DOM-元素上展开-props-需要小心"><span class="nav-number">15.</span> <span class="nav-text">为什么在 DOM 元素上展开 props 需要小心?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中如何使用装饰器"><span class="nav-number">16.</span> <span class="nav-text">在 React 中如何使用装饰器?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何-memoize（记忆）组件"><span class="nav-number">17.</span> <span class="nav-text">如何 memoize（记忆）组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何实现-Server-Side-Rendering-或-SSR"><span class="nav-number">18.</span> <span class="nav-text">如何实现 Server Side Rendering 或 SSR?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-中启用生产模式"><span class="nav-number">19.</span> <span class="nav-text">如何在 React 中启用生产模式?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-CRA-及其好处"><span class="nav-number">20.</span> <span class="nav-text">什么是 CRA 及其好处?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-mounting-阶段生命周期方法的执行顺序是什么"><span class="nav-number">21.</span> <span class="nav-text">在 mounting 阶段生命周期方法的执行顺序是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-v16-中，哪些生命周期方法将被弃用"><span class="nav-number">22.</span> <span class="nav-text">在 React v16 中，哪些生命周期方法将被弃用?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#生命周期方法-getDerivedStateFromProps-的目的是什么"><span class="nav-number">23.</span> <span class="nav-text">生命周期方法 getDerivedStateFromProps() 的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#生命周期方法-getSnapshotBeforeUpdate-的目的是什么"><span class="nav-number">24.</span> <span class="nav-text">生命周期方法 getSnapshotBeforeUpdate() 的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#createElement-和-cloneElement-方法有什么区别"><span class="nav-number">25.</span> <span class="nav-text">createElement() 和 cloneElement() 方法有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#推荐的组件命名方法是什么"><span class="nav-number">26.</span> <span class="nav-text">推荐的组件命名方法是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在组件类中方法的推荐顺序是什么"><span class="nav-number">27.</span> <span class="nav-text">在组件类中方法的推荐顺序是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-switching-组件"><span class="nav-number">28.</span> <span class="nav-text">什么是 switching 组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么我们需要将函数传递给-setState-方法"><span class="nav-number">29.</span> <span class="nav-text">为什么我们需要将函数传递给 setState() 方法?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中什么是严格模式"><span class="nav-number">30.</span> <span class="nav-text">在 React 中什么是严格模式?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Mixins-是什么"><span class="nav-number">31.</span> <span class="nav-text">React Mixins 是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么-isMounted-是一个反模式，而正确的解决方案是什么"><span class="nav-number">32.</span> <span class="nav-text">为什么 isMounted() 是一个反模式，而正确的解决方案是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-中支持哪些指针事件"><span class="nav-number">33.</span> <span class="nav-text">React 中支持哪些指针事件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么组件名称应该以大写字母开头"><span class="nav-number">34.</span> <span class="nav-text">为什么组件名称应该以大写字母开头?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-v16-中是否支持自定义-DOM-属性"><span class="nav-number">35.</span> <span class="nav-text">在 React v16 中是否支持自定义 DOM 属性?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#constructor-和-getInitialState-有什么区别"><span class="nav-number">36.</span> <span class="nav-text">constructor 和 getInitialState 有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#是否可以在不调用-setState-方法的情况下，强制组件重新渲染"><span class="nav-number">37.</span> <span class="nav-text">是否可以在不调用 setState 方法的情况下，强制组件重新渲染?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在使用-ES6-类的-React-中-super-和-super-props-有什么区别"><span class="nav-number">38.</span> <span class="nav-text">在使用 ES6 类的 React 中 super() 和 super(props) 有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-JSX-中如何进行循环"><span class="nav-number">39.</span> <span class="nav-text">在 JSX 中如何进行循环?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-attribute-引号中访问-props-属性"><span class="nav-number">40.</span> <span class="nav-text">如何在 attribute 引号中访问 props 属性?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-React-proptype-数组"><span class="nav-number">41.</span> <span class="nav-text">什么是 React proptype 数组?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何有条件地应用样式类"><span class="nav-number">42.</span> <span class="nav-text">如何有条件地应用样式类?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-和-ReactDOM-之间有什么区别"><span class="nav-number">43.</span> <span class="nav-text">React 和 ReactDOM 之间有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么-ReactDOM-从-React-分离出来"><span class="nav-number">44.</span> <span class="nav-text">为什么 ReactDOM 从 React 分离出来?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何使用-React-label-元素"><span class="nav-number">45.</span> <span class="nav-text">如何使用 React label 元素?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何合并多个内联的样式对象"><span class="nav-number">46.</span> <span class="nav-text">如何合并多个内联的样式对象?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在调整浏览器大小时重新渲染视图"><span class="nav-number">47.</span> <span class="nav-text">如何在调整浏览器大小时重新渲染视图?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#setState-和-replaceState-方法之间有什么区别"><span class="nav-number">48.</span> <span class="nav-text">setState() 和 replaceState() 方法之间有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何监听状态变化"><span class="nav-number">49.</span> <span class="nav-text">如何监听状态变化?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-状态中删除数组元素的推荐方法是什么"><span class="nav-number">50.</span> <span class="nav-text">在 React 状态中删除数组元素的推荐方法是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中是否可以不在页面上渲染-HTML-内容"><span class="nav-number">51.</span> <span class="nav-text">在 React 中是否可以不在页面上渲染 HTML 内容?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何用-React-漂亮地显示-JSON"><span class="nav-number">52.</span> <span class="nav-text">如何用 React 漂亮地显示 JSON?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么你不能更新-React-中的-props"><span class="nav-number">53.</span> <span class="nav-text">为什么你不能更新 React 中的 props?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在页面加载时聚焦一个输入元素"><span class="nav-number">54.</span> <span class="nav-text">如何在页面加载时聚焦一个输入元素?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#更新状态中的对象有哪些可能的方法"><span class="nav-number">55.</span> <span class="nav-text">更新状态中的对象有哪些可能的方法?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么函数比对象更适合于-setState"><span class="nav-number">56.</span> <span class="nav-text">为什么函数比对象更适合于 setState()?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#我们如何在浏览器中找到当前正在运行的-React-版本"><span class="nav-number">57.</span> <span class="nav-text">我们如何在浏览器中找到当前正在运行的 React 版本?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-create-react-app-项目中导入-polyfills-的方法有哪些"><span class="nav-number">58.</span> <span class="nav-text">在 create-react-app 项目中导入 polyfills 的方法有哪些?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-create-react-app-中使用-https-而不是-http"><span class="nav-number">59.</span> <span class="nav-text">如何在 create-react-app 中使用 https 而不是 http?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何避免在-create-react-app-中使用相对路径导入"><span class="nav-number">60.</span> <span class="nav-text">如何避免在 create-react-app 中使用相对路径导入?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何为-React-Router-添加-Google-Analytics"><span class="nav-number">61.</span> <span class="nav-text">如何为 React Router 添加 Google Analytics?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何每秒更新一个组件"><span class="nav-number">62.</span> <span class="nav-text">如何每秒更新一个组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何将-vendor-prefixes-应用于-React-中的内联样式"><span class="nav-number">63.</span> <span class="nav-text">如何将 vendor prefixes 应用于 React 中的内联样式?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何使用-React-和-ES6-导入和导出组件"><span class="nav-number">64.</span> <span class="nav-text">如何使用 React 和 ES6 导入和导出组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么-React-组件名称必须以大写字母开头"><span class="nav-number">65.</span> <span class="nav-text">为什么 React 组件名称必须以大写字母开头?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么组件的构造函数只被调用一次"><span class="nav-number">66.</span> <span class="nav-text">为什么组件的构造函数只被调用一次?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中如何定义常量"><span class="nav-number">67.</span> <span class="nav-text">在 React 中如何定义常量?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中如何以编程方式触发点击事件"><span class="nav-number">68.</span> <span class="nav-text">在 React 中如何以编程方式触发点击事件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中是否可以使用-async-await"><span class="nav-number">69.</span> <span class="nav-text">在 React 中是否可以使用 async/await?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-项目常见的文件结构是什么"><span class="nav-number">70.</span> <span class="nav-text">React 项目常见的文件结构是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#最流行的动画软件包是什么"><span class="nav-number">71.</span> <span class="nav-text">最流行的动画软件包是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#模块化样式文件有什么好处"><span class="nav-number">72.</span> <span class="nav-text">模块化样式文件有什么好处?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-React-流行的特定-linters"><span class="nav-number">73.</span> <span class="nav-text">什么是 React 流行的特定 linters?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何发起-AJAX-调用以及应该在哪些组件生命周期方法中进行-AJAX-调用"><span class="nav-number">74.</span> <span class="nav-text">如何发起 AJAX 调用以及应该在哪些组件生命周期方法中进行 AJAX 调用?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是渲染属性"><span class="nav-number">75.</span> <span class="nav-text">什么是渲染属性?</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#React-Router"><span class="nav-number"></span> <span class="nav-text">React Router</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-React-Router"><span class="nav-number">1.</span> <span class="nav-text">什么是 React Router?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Router-与-history-库的区别"><span class="nav-number">2.</span> <span class="nav-text">React Router 与 history 库的区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-Router-v4-中的-lt-Router-gt-组件是什么"><span class="nav-number">3.</span> <span class="nav-text">在 React Router v4 中的&lt;Router&gt;组件是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#history-中的-push-和-replace-方法的目的是什么"><span class="nav-number">4.</span> <span class="nav-text">history 中的 push() 和 replace() 方法的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何使用在-React-Router-v4-中以编程的方式进行导航"><span class="nav-number">5.</span> <span class="nav-text">如何使用在 React Router v4 中以编程的方式进行导航?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-Router-v4-中获取查询字符串参数"><span class="nav-number">6.</span> <span class="nav-text">如何在 React Router v4 中获取查询字符串参数?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么你会得到-“Router-may-have-only-one-child-element”-警告"><span class="nav-number">7.</span> <span class="nav-text">为什么你会得到 “Router may have only one child element” 警告?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-Router-v4-中将-params-传递给-history-push-方法"><span class="nav-number">8.</span> <span class="nav-text">如何在 React Router v4 中将 params 传递给 history.push 方法?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何实现默认页面或-404-页面"><span class="nav-number">9.</span> <span class="nav-text">如何实现默认页面或 404 页面?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-Router-v4-上获取历史对象"><span class="nav-number">10.</span> <span class="nav-text">如何在 React Router v4 上获取历史对象?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#登录后如何执行自动重定向"><span class="nav-number">11.</span> <span class="nav-text">登录后如何执行自动重定向?</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#React-Internationalization"><span class="nav-number"></span> <span class="nav-text">React Internationalization</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-React-Intl"><span class="nav-number">1.</span> <span class="nav-text">什么是 React Intl?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Intl-的主要特性是什么"><span class="nav-number">2.</span> <span class="nav-text">React Intl 的主要特性是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-Intl-中有哪两种格式化方式"><span class="nav-number">3.</span> <span class="nav-text">在 React Intl 中有哪两种格式化方式?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-Intl-中如何使用-lt-FormattedMessage-gt-作为占位符使用"><span class="nav-number">4.</span> <span class="nav-text">在 React Intl 中如何使用&lt;FormattedMessage&gt;作为占位符使用?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何使用-React-Intl-访问当前语言环境"><span class="nav-number">5.</span> <span class="nav-text">如何使用 React Intl 访问当前语言环境?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何使用-React-Intl-格式化日期"><span class="nav-number">6.</span> <span class="nav-text">如何使用 React Intl 格式化日期?</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#React-Testing"><span class="nav-number"></span> <span class="nav-text">React Testing</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-测试中什么是浅层渲染（Shallow-Renderer）"><span class="nav-number">1.</span> <span class="nav-text">在 React 测试中什么是浅层渲染（Shallow Renderer）?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中-TestRenderer-包是什么"><span class="nav-number">2.</span> <span class="nav-text">在 React 中 TestRenderer 包是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ReactTestUtils-包的目的是什么"><span class="nav-number">3.</span> <span class="nav-text">ReactTestUtils 包的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Jest"><span class="nav-number">4.</span> <span class="nav-text">什么是 Jest?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Jest-对比-Jasmine-有什么优势"><span class="nav-number">5.</span> <span class="nav-text">Jest 对比 Jasmine 有什么优势?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#举一个简单的-Jest-测试用例"><span class="nav-number">6.</span> <span class="nav-text">举一个简单的 Jest 测试用例</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#React-Redux"><span class="nav-number"></span> <span class="nav-text">React Redux</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Flux"><span class="nav-number">1.</span> <span class="nav-text">什么是 Flux?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Redux"><span class="nav-number">2.</span> <span class="nav-text">什么是 Redux?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redux-的核心原则是什么？"><span class="nav-number">3.</span> <span class="nav-text">Redux 的核心原则是什么？?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#与-Flux-相比，Redux-的缺点是什么"><span class="nav-number">4.</span> <span class="nav-text">与 Flux 相比，Redux 的缺点是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mapStateToProps-和-mapDispatchToProps-之间有什么区别"><span class="nav-number">5.</span> <span class="nav-text">mapStateToProps() 和 mapDispatchToProps() 之间有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#我可以在-reducer-中触发一个-Action-吗"><span class="nav-number">6.</span> <span class="nav-text">我可以在 reducer 中触发一个 Action 吗?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在组件外部访问-Redux-存储的对象"><span class="nav-number">7.</span> <span class="nav-text">如何在组件外部访问 Redux 存储的对象?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#MVW-模式的缺点是什么"><span class="nav-number">8.</span> <span class="nav-text">MVW 模式的缺点是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redux-和-RxJS-之间是否有任何相似之处"><span class="nav-number">9.</span> <span class="nav-text">Redux 和 RxJS 之间是否有任何相似之处?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在加载时触发-Action"><span class="nav-number">10.</span> <span class="nav-text">如何在加载时触发 Action?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中如何使用-Redux-的-connect"><span class="nav-number">11.</span> <span class="nav-text">在 React 中如何使用 Redux 的 connect() ?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-Redux-中重置状态"><span class="nav-number">12.</span> <span class="nav-text">如何在 Redux 中重置状态?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redux-中连接装饰器的-at-符号的目的是什么"><span class="nav-number">13.</span> <span class="nav-text">Redux 中连接装饰器的 at 符号的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-上下文和-React-Redux-之间有什么区别"><span class="nav-number">14.</span> <span class="nav-text">React 上下文和 React Redux 之间有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么-Redux-状态函数称为-reducers"><span class="nav-number">15.</span> <span class="nav-text">为什么 Redux 状态函数称为 reducers ?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-Redux-中发起-AJAX-请求"><span class="nav-number">16.</span> <span class="nav-text">如何在 Redux 中发起 AJAX 请求?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#我应该在-Redux-Store-中保留所有组件的状态吗"><span class="nav-number">17.</span> <span class="nav-text">我应该在 Redux Store 中保留所有组件的状态吗?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#访问-Redux-Store-的正确方法是什么"><span class="nav-number">18.</span> <span class="nav-text">访问 Redux Store 的正确方法是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Redux-中展示组件和容器组件之间的区别是什么"><span class="nav-number">19.</span> <span class="nav-text">React Redux 中展示组件和容器组件之间的区别是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redux-中常量的用途是什么"><span class="nav-number">20.</span> <span class="nav-text">Redux 中常量的用途是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#编写-mapDispatchToProps-有哪些不同的方法"><span class="nav-number">21.</span> <span class="nav-text">编写 mapDispatchToProps() 有哪些不同的方法?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-mapStateToProps-和-mapDispatchToProps-中使用-ownProps-参数有什么用"><span class="nav-number">22.</span> <span class="nav-text">在 mapStateToProps() 和 mapDispatchToProps() 中使用 ownProps 参数有什么用?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何构建-Redux-项目目录"><span class="nav-number">23.</span> <span class="nav-text">如何构建 Redux 项目目录?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-redux-saga"><span class="nav-number">24.</span> <span class="nav-text">什么是 redux-saga?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#redux-saga-的模型概念是什么"><span class="nav-number">25.</span> <span class="nav-text">redux-saga 的模型概念是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-redux-saga-中-call-和-put-之间有什么区别"><span class="nav-number">26.</span> <span class="nav-text">在 redux-saga 中 call() 和 put() 之间有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Redux-Thunk"><span class="nav-number">27.</span> <span class="nav-text">什么是 Redux Thunk?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#redux-saga-和-redux-thunk-之间有什么区别"><span class="nav-number">28.</span> <span class="nav-text">redux-saga 和 redux-thunk 之间有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Redux-DevTools"><span class="nav-number">29.</span> <span class="nav-text">什么是 Redux DevTools?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redux-DevTools-的功能有哪些"><span class="nav-number">30.</span> <span class="nav-text">Redux DevTools 的功能有哪些?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Redux-选择器以及使用它们的原因"><span class="nav-number">31.</span> <span class="nav-text">什么是 Redux 选择器以及使用它们的原因?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Redux-Form"><span class="nav-number">32.</span> <span class="nav-text">什么是 Redux Form?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redux-Form-的主要功能有哪些"><span class="nav-number">33.</span> <span class="nav-text">Redux Form 的主要功能有哪些?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何向-Redux-添加多个中间件"><span class="nav-number">34.</span> <span class="nav-text">如何向 Redux 添加多个中间件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-Redux-中设置初始状态"><span class="nav-number">35.</span> <span class="nav-text">如何在 Redux 中设置初始状态?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Relay-与-Redux-有何不同"><span class="nav-number">36.</span> <span class="nav-text">Relay 与 Redux 有何不同?</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#React-Native"><span class="nav-number"></span> <span class="nav-text">React Native</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Native-和-React-有什么区别"><span class="nav-number">1.</span> <span class="nav-text">React Native 和 React 有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何测试-React-Native-应用程序"><span class="nav-number">2.</span> <span class="nav-text">如何测试 React Native 应用程序?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-Native-查看日志"><span class="nav-number">3.</span> <span class="nav-text">如何在 React Native 查看日志?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#怎么调试-React-Native-应用"><span class="nav-number">4.</span> <span class="nav-text">怎么调试 React Native 应用?</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#React-supported-libraries-amp-Integration"><span class="nav-number"></span> <span class="nav-text">React supported libraries &amp; Integration</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Reselect-以及它是如何工作的"><span class="nav-number">1.</span> <span class="nav-text">什么是 Reselect 以及它是如何工作的?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Flow"><span class="nav-number">2.</span> <span class="nav-text">什么是 Flow?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Flow-和-PropTypes-有什么区别"><span class="nav-number">3.</span> <span class="nav-text">Flow 和 PropTypes 有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中如何使用-Font-Awesome-图标"><span class="nav-number">4.</span> <span class="nav-text">在 React 中如何使用 Font Awesome 图标?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么-是-React-开发者工具"><span class="nav-number">5.</span> <span class="nav-text">什么 是 React 开发者工具?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-Chrome-中为什么-DevTools-没有加载本地文件"><span class="nav-number">6.</span> <span class="nav-text">在 Chrome 中为什么 DevTools 没有加载本地文件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-中使用-Polymer"><span class="nav-number">7.</span> <span class="nav-text">如何在 React 中使用 Polymer?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#与-Vue-js-相比，React-有哪些优势"><span class="nav-number">8.</span> <span class="nav-text">与 Vue.js 相比，React 有哪些优势?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-和-Angular-有什么区别"><span class="nav-number">9.</span> <span class="nav-text">React 和 Angular 有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么-React-选项卡不会显示在-DevTools-中"><span class="nav-number">10.</span> <span class="nav-text">为什么 React 选项卡不会显示在 DevTools 中?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Styled-Components"><span class="nav-number">11.</span> <span class="nav-text">什么是 Styled Components?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#举一个-Styled-Components-的例子"><span class="nav-number">12.</span> <span class="nav-text">举一个 Styled Components 的例子?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Relay"><span class="nav-number">13.</span> <span class="nav-text">什么是 Relay?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-create-react-app-中使用-TypeScript"><span class="nav-number">14.</span> <span class="nav-text">如何在 create-react-app 中使用 TypeScript?</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Miscellaneous"><span class="nav-number"></span> <span class="nav-text">Miscellaneous</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Reselect-库的主要功能有哪些"><span class="nav-number">1.</span> <span class="nav-text">Reselect 库的主要功能有哪些?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#举一个-Reselect-用法的例子"><span class="nav-number">2.</span> <span class="nav-text">举一个 Reselect 用法的例子?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redux-中的-Action-是什么"><span class="nav-number">3.</span> <span class="nav-text">Redux 中的 Action 是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中-statics-对象是否能与-ES6-类一起使用"><span class="nav-number">4.</span> <span class="nav-text">在 React 中 statics 对象是否能与 ES6 类一起使用?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redux-只能与-React-一起使用么"><span class="nav-number">5.</span> <span class="nav-text">Redux 只能与 React 一起使用么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#您是否需要使用特定的构建工具来使用-Redux"><span class="nav-number">6.</span> <span class="nav-text">您是否需要使用特定的构建工具来使用 Redux ?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Redux-Form-的-initialValues-如何从状态更新"><span class="nav-number">7.</span> <span class="nav-text">Redux Form 的 initialValues 如何从状态更新?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-是如何为一个属性声明不同的类型"><span class="nav-number">8.</span> <span class="nav-text">React 是如何为一个属性声明不同的类型?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#我可以导入一个-SVG-文件作为-React-组件么"><span class="nav-number">9.</span> <span class="nav-text">我可以导入一个 SVG 文件作为 React 组件么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么不建议使用内联引用回调或函数"><span class="nav-number">10.</span> <span class="nav-text">为什么不建议使用内联引用回调或函数?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中什么是渲染劫持"><span class="nav-number">11.</span> <span class="nav-text">在 React 中什么是渲染劫持?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-HOC-工厂实现"><span class="nav-number">12.</span> <span class="nav-text">什么是 HOC 工厂实现?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何传递数字给-React-组件"><span class="nav-number">13.</span> <span class="nav-text">如何传递数字给 React 组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#我需要将所有状态保存到-Redux-中吗？我应该使用-react-的内部状态吗"><span class="nav-number">14.</span> <span class="nav-text">我需要将所有状态保存到 Redux 中吗？我应该使用 react 的内部状态吗?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-React-中-registerServiceWorker-的用途是什么"><span class="nav-number">15.</span> <span class="nav-text">在 React 中 registerServiceWorker 的用途是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-memo-函数是什么"><span class="nav-number">16.</span> <span class="nav-text">React memo 函数是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-lazy-函数是什么"><span class="nav-number">17.</span> <span class="nav-text">React lazy 函数是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何使用-setState-防止不必要的更新"><span class="nav-number">18.</span> <span class="nav-text">如何使用 setState 防止不必要的更新?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-16-版本中渲染数组、字符串和数值"><span class="nav-number">19.</span> <span class="nav-text">如何在 React 16 版本中渲染数组、字符串和数值?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-React-类中使用类字段声明语法"><span class="nav-number">20.</span> <span class="nav-text">如何在 React 类中使用类字段声明语法?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-hooks"><span class="nav-number">21.</span> <span class="nav-text">什么是 hooks?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Hooks-需要遵循什么规则"><span class="nav-number">22.</span> <span class="nav-text">Hooks 需要遵循什么规则?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何确保钩子遵循正确的使用规则"><span class="nav-number">23.</span> <span class="nav-text">如何确保钩子遵循正确的使用规则?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Flux-和-Redux-之间有什么区别"><span class="nav-number">24.</span> <span class="nav-text">Flux 和 Redux 之间有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Router-V4-有什么好处"><span class="nav-number">25.</span> <span class="nav-text">React Router V4 有什么好处?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#您能描述一下-componentDidCatch-生命周期方法签名吗"><span class="nav-number">26.</span> <span class="nav-text">您能描述一下 componentDidCatch 生命周期方法签名吗?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在哪些情况下，错误边界不会捕获错误"><span class="nav-number">27.</span> <span class="nav-text">在哪些情况下，错误边界不会捕获错误?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么事件处理器不需要错误边界"><span class="nav-number">28.</span> <span class="nav-text">为什么事件处理器不需要错误边界?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#try-catch-与错误边界有什么区别"><span class="nav-number">29.</span> <span class="nav-text">try catch 与错误边界有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-16-中未捕获的错误的行为是什么"><span class="nav-number">30.</span> <span class="nav-text">React 16 中未捕获的错误的行为是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#放置错误边界的正确位置是什么"><span class="nav-number">31.</span> <span class="nav-text">放置错误边界的正确位置是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#从错误边界跟踪组件堆栈有什么好处"><span class="nav-number">32.</span> <span class="nav-text">从错误边界跟踪组件堆栈有什么好处?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在定义类组件时，什么是必须的方法"><span class="nav-number">33.</span> <span class="nav-text">在定义类组件时，什么是必须的方法?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#render-方法可能返回的类型是什么"><span class="nav-number">34.</span> <span class="nav-text">render 方法可能返回的类型是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#构造函数的主要目的是什么"><span class="nav-number">35.</span> <span class="nav-text">构造函数的主要目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#是否必须为-React-组件定义构造函数"><span class="nav-number">36.</span> <span class="nav-text">是否必须为 React 组件定义构造函数?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是默认属性"><span class="nav-number">37.</span> <span class="nav-text">什么是默认属性?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么不能在-componentWillUnmount-中调用-setState-方法"><span class="nav-number">38.</span> <span class="nav-text">为什么不能在 componentWillUnmount 中调用 setState() 方法?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#getDerivedStateFromError-的目的是什么"><span class="nav-number">39.</span> <span class="nav-text">getDerivedStateFromError 的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#当组件重新渲染时顺序执行的方法有哪些"><span class="nav-number">40.</span> <span class="nav-text">当组件重新渲染时顺序执行的方法有哪些?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#错误处理期间调用哪些方法"><span class="nav-number">41.</span> <span class="nav-text">错误处理期间调用哪些方法?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#displayName-类属性的用途是什么"><span class="nav-number">42.</span> <span class="nav-text">displayName 类属性的用途是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#支持-React-应用程序的浏览器有哪一些"><span class="nav-number">43.</span> <span class="nav-text">支持 React 应用程序的浏览器有哪一些?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#unmountComponentAtNode-方法的目的是什么"><span class="nav-number">44.</span> <span class="nav-text">unmountComponentAtNode 方法的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是代码拆分"><span class="nav-number">45.</span> <span class="nav-text">什么是代码拆分?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#严格模式有什么好处"><span class="nav-number">46.</span> <span class="nav-text">严格模式有什么好处?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-Keyed-Fragments"><span class="nav-number">47.</span> <span class="nav-text">什么是 Keyed Fragments ?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#React-支持所有的-HTML-属性么"><span class="nav-number">48.</span> <span class="nav-text">React 支持所有的 HTML 属性么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HOC-有哪些限制"><span class="nav-number">49.</span> <span class="nav-text">HOC 有哪些限制?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在-DevTools-中调试-forwardRefs"><span class="nav-number">50.</span> <span class="nav-text">如何在 DevTools 中调试 forwardRefs?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么时候组件的-props-属性默认为-true"><span class="nav-number">51.</span> <span class="nav-text">什么时候组件的 props 属性默认为 true?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-NextJS-及其主要特征"><span class="nav-number">52.</span> <span class="nav-text">什么是 NextJS 及其主要特征?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何将事件处理程序传递给组件"><span class="nav-number">53.</span> <span class="nav-text">如何将事件处理程序传递给组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在渲染方法中使用箭头函数好么"><span class="nav-number">54.</span> <span class="nav-text">在渲染方法中使用箭头函数好么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何防止函数被多次调用"><span class="nav-number">55.</span> <span class="nav-text">如何防止函数被多次调用?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JSX-如何防止注入攻击"><span class="nav-number">56.</span> <span class="nav-text">JSX 如何防止注入攻击?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何更新已渲染的元素"><span class="nav-number">57.</span> <span class="nav-text">如何更新已渲染的元素?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#你怎么说-props-是只读的"><span class="nav-number">58.</span> <span class="nav-text">你怎么说 props 是只读的?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#你认为状态更新是如何合并的"><span class="nav-number">59.</span> <span class="nav-text">你认为状态更新是如何合并的?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何将参数传递给事件处理程序"><span class="nav-number">60.</span> <span class="nav-text">如何将参数传递给事件处理程序?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何防止组件渲染"><span class="nav-number">61.</span> <span class="nav-text">如何防止组件渲染?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安全地使用索引作为键的条件是什么"><span class="nav-number">62.</span> <span class="nav-text">安全地使用索引作为键的条件是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#keys-是否需要全局唯一"><span class="nav-number">63.</span> <span class="nav-text">keys 是否需要全局唯一?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#用于表单处理的流行选择是什么"><span class="nav-number">64.</span> <span class="nav-text">用于表单处理的流行选择是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#formik-相对于其他-redux-表单库有什么优势"><span class="nav-number">65.</span> <span class="nav-text">formik 相对于其他 redux 表单库有什么优势?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么不需要使用继承"><span class="nav-number">66.</span> <span class="nav-text">为什么不需要使用继承?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#我可以在-React-应用程序中可以使用-web-components-么"><span class="nav-number">67.</span> <span class="nav-text">我可以在 React 应用程序中可以使用 web components 么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是动态导入"><span class="nav-number">68.</span> <span class="nav-text">什么是动态导入?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-loadable-组件"><span class="nav-number">69.</span> <span class="nav-text">什么是 loadable 组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-suspense-组件"><span class="nav-number">70.</span> <span class="nav-text">什么是 suspense 组件?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是基于路由的代码拆分"><span class="nav-number">71.</span> <span class="nav-text">什么是基于路由的代码拆分?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#举例说明如何使用-context"><span class="nav-number">72.</span> <span class="nav-text">举例说明如何使用 context?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-context-中默认值的目的是什么"><span class="nav-number">73.</span> <span class="nav-text">在 context 中默认值的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#你是怎么使用-contextType"><span class="nav-number">74.</span> <span class="nav-text">你是怎么使用 contextType?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-consumer"><span class="nav-number">75.</span> <span class="nav-text">什么是 consumer?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在使用-context-时，如何解决性能方面的问题"><span class="nav-number">76.</span> <span class="nav-text">在使用 context 时，如何解决性能方面的问题?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-HOCs-中-forward-ref-的目的是什么"><span class="nav-number">77.</span> <span class="nav-text">在 HOCs 中 forward ref 的目的是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ref-参数对于所有函数或类组件是否可用"><span class="nav-number">78.</span> <span class="nav-text">ref 参数对于所有函数或类组件是否可用?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在组件库中当使用-forward-refs-时，你需要额外的注意"><span class="nav-number">79.</span> <span class="nav-text">在组件库中当使用 forward refs 时，你需要额外的注意?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在没有-ES6-的情况下创建-React-类组件"><span class="nav-number">80.</span> <span class="nav-text">如何在没有 ES6 的情况下创建 React 类组件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#是否可以在没有-JSX-的情况下使用-React"><span class="nav-number">81.</span> <span class="nav-text">是否可以在没有 JSX 的情况下使用 React?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是差异算法"><span class="nav-number">82.</span> <span class="nav-text">什么是差异算法?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#差异算法涵盖了哪些规则"><span class="nav-number">83.</span> <span class="nav-text">差异算法涵盖了哪些规则?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#你什么时候需要使用-refs"><span class="nav-number">84.</span> <span class="nav-text">你什么时候需要使用 refs?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对于渲染属性来说是否必须将-prop-属性命名为-render"><span class="nav-number">85.</span> <span class="nav-text">对于渲染属性来说是否必须将 prop 属性命名为 render?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在-Pure-Component-中使用渲染属性会有什么问题"><span class="nav-number">86.</span> <span class="nav-text">在 Pure Component 中使用渲染属性会有什么问题?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何使用渲染属性创建-HOC"><span class="nav-number">87.</span> <span class="nav-text">如何使用渲染属性创建 HOC?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是-windowing-技术"><span class="nav-number">88.</span> <span class="nav-text">什么是 windowing 技术?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#你如何在-JSX-中打印-falsy-值"><span class="nav-number">89.</span> <span class="nav-text">你如何在 JSX 中打印 falsy 值?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#portals-的典型使用场景是什么"><span class="nav-number">90.</span> <span class="nav-text">portals 的典型使用场景是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何设置非受控组件的默认值"><span class="nav-number">91.</span> <span class="nav-text">如何设置非受控组件的默认值?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#你最喜欢的-React-技术栈是什么"><span class="nav-number">92.</span> <span class="nav-text">你最喜欢的 React 技术栈是什么?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Real-DOM-和-Virtual-DOM-有什么区别"><span class="nav-number">93.</span> <span class="nav-text">Real DOM 和 Virtual DOM 有什么区别?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何为-React-应用程序添加-bootstrap"><span class="nav-number">94.</span> <span class="nav-text">如何为 React 应用程序添加 bootstrap?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#你能否列出使用-React-作为前端框架的顶级网站或应用程序"><span class="nav-number">95.</span> <span class="nav-text">你能否列出使用 React 作为前端框架的顶级网站或应用程序?</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#是否建议在-React-中使用-CSS-In-JS-技术"><span class="nav-number">96.</span> <span class="nav-text">是否建议在 React 中使用 CSS In JS 技术?</span></a></li></ol></div>
            
          </div>
        </section>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2013 - 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">华Ing</span>
</div>

<div class="powered-by">
  Powered by <a class="theme-link" href="https://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>

        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.0.2"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"wurh"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
    <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  






  
  

  

  

  

  


</body>
</html>
